@import url("variable.css");

body {
    overflow-x: hidden;
    font-feature-settings: 'lnum' 1;
    color: var(--interactive-text-gray-normal);
    background-color: var(--surface-background-gray-subtle);
}
a {
    color: var(--interactive-text-primary-normal);
    text-decoration: underline;
}
.main{
    display:flex;
    overflow-x: auto;
    margin-top: 48px;
}

.slot{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.i3_header {
    background-color: var(--header-and-footer);
    border-bottom: 4px solid var(--surface-background-primary-intense);
    padding: var(--switch-medium-padding);
    min-height: 48px;
}
.i3_header a {
	color: var(--ds-white);
	font-family: "Raleway", sans-serif;
	font-weight: 300; 
	padding: 4px;
	margin: 3px 6px;
	text-decoration: none;
    }

.wrapper{
    background-color: var(--surface-background-gray-subtle);
}
/* .hide {display:none;} */
a.navbar-brand { margin: 0px; padding:6px 3px;}
a.navbar-brand img{ margin-top: -3px;}
.i3_header .navbar-collapse { justify-content:right;}

.left_navigation ul {
    padding: var(--switch-medium-padding);
    text-decoration: none;
    background-color: var(--surface-icon-staticwhite-normal);
    height: 100vh;
    overflow-y: scroll;
}
.left_navigation ul li {
    padding:15px;
}

h5 {
    font-family: "Raleway", sans-serif;
}

.i3_header .navbar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 0;
	flex-wrap: nowrap;
}

.i3_header .navbar-nav {
    flex-flow: nowrap;
}

.typo {
    position: relative;
  }

.typo::after{
    content: " ";
    height: 1px;
    width: 88%;
    position: absolute;
    left: 0;
    background: var(--surface-border-gray-muted);
    align-items: center;
    justify-content: center; 
    margin: 0px 15px;
  }
  
/*sidebar css start*/

#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidebar-container {
     background-color:var(--surface-background-gray-moderate);
    padding: var(--spacing-0);
    border-right: var(--surface-border-gray-muted) solid 1px;
}

.sidebar-submenu {
    font-size: var(--fz-size-14);
}

ul.sidebar-submenu li {
    padding-left: 20px;
}

ul.sidebar-submenu li:hover {
    font-weight: var(--fw-600);
}

ul.sidebar-submenu li:before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
    z-index: 99; 
}

ul.sidebar-submenu li.active:before {
    border:var(--bwidth-thin) solid var(--interactive-border-primary-default);
}

ul.sidebar-submenu li.active .menu-collapsed {
    color: var(--interactive-text-primary-normal);
}

ul.sidebar-submenu li {
    position: relative;
}

ul.sidebar-submenu {
    padding: 10px 0;
}


/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f105";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f107";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}

.list-group .menu-collapsed {
    color: var(--interactive-text-gray-normal);
    font-size: var(--fz-size-14);
    vertical-align: text-top;
}

.list-group .list-group-item {
    border: var(--bradius-none);
}

.list-group .menu-collapsed.head {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--fz-size-14);
    font-weight: 500;
}

.icon_font {
    font-size: 16px !important;
}

.sidebar-expanded .nav_expand {
    justify-content:space-between;
}
.sidebar-collapsed .nav_expand {
    justify-content:center;
}

.sidebar-expanded ul li a:hover {
 background-color: var(--interactive-background-gray-default);
}

.sidebar-expanded ul li.secondlevel a:hover {
    background-color: var(--transperent) !important;
    font-weight: var(--fw-600);
}

ul.sidebar-submenu li:hover:before {
    border:var(--bwidth-thin) solid var(--normal);
}

.components .component_text {
    font-size:var(--fz-size-12);
    line-height: var(--lineheight-18);
    color: var(--interactive-text-gray-muted);
    font-weight: var(--fw-600);
}

.header {
    position: fixed;
    top: 0;
    z-index: 999;
}
#sidebar {
    min-width: 270px;
    max-width: 270px;
    transition: all 0.3s;
    position: fixed;
    height: calc(100vh - 50px);
    padding-left: .25rem;
    margin-left: -.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
	box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
  }
  
  #sidebar.active {
    margin-left: -270px;
  }
  #content.active {
    margin-left: 265px;
  }
  
  #content {
    transition: all 0.3s;
  }


  a:focus, button:focus {
    outline: 2px solid var(--surface-background-primary-muted) !important;
  }


  .nav-link:focus-visible {
    box-shadow: none;
  }

  li.components li.active a{
    background-color: var(--interactive-background-primary-faded) !important;
  }

/*landing page css*/

.welcome {
    text-align: center;
    background-color: var(--card-bg-moderate);
    padding: 70px 20px;
    border-radius: var(--bradius-medium);
    
    margin-top: var(--ps-10);   
}
.welcome .text_welcome {
    font-style: italic;
    color: var(--interactive-text-gray-normal);
    font-size: var(--fz-size-14);
}
.welcome .text_details {
    color: var(--interactive-text-gray-normal);
    font-weight: var(--font-weight-semi-bold);
    font-family: var(--typography-typefaces-heading);
    font-size: var(--fz-size-18);
    font-feature-settings: 'lnum' 1;
}
.welcome .text_color {
    color: var(--interactive-text-primary-normal);
}
.card.i3_card {
    padding: 15px;
    border-color: var(--surface-border-gray-muted);
    min-height: 95px;
}
.i3_card .h6 {
    font-size: var(--fz-size-18);
    font-weight: var(--fw-600);
    line-height: var(--lineheight-24);
    color: var(--surface-text-gray-normal);
    margin-bottom: 3px;
}
.i3_card p {
    font-size:var(--fz-size-14);
    color: var(--surface-text-gray-subtle);
}
.i3_card .next i {
    background-color: var(--interactive-background-primary-default);
    padding: var(--size-08);
    border-radius: var(--bradius-medium);
    color: var(--interactive-icon-onprimary-normal);
}

.content-wrapper {
    margin-bottom: 80px;
}
ul {list-style-type: none;}
#sidebar ul {
    list-style-type: none;
    padding-left: 0 !important;
}

.next {
    margin-top: 5px;
}
.list-group li a.active {
    background-color: var(--interactive-background-primary-faded);
}

.list-group li a {
    border-radius: var(--bradius-medium) !important;
}

ul.list-group li a[aria-expanded="true"] {
    background-color: var(--interactive-background-primary-faded) !important;
}

ul.list-group li a[aria-expanded="true"]:hover {
    background-color: var(--interactive-background-primary-fadedHighlighted) !important;
} 
li.components li.active a:hover {
    background-color: var(--interactive-background-primary-fadedHighlighted) !important;
}

ul.list-group li [aria-expanded="true"]::after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e845';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 16%;
    color: var(--surface-icon-gray-normal);
}
ul.list-group li [aria-expanded="false"]::after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e844';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 16%;
    color: var(--surface-icon-gray-normal);
}
.icon_color {
    color: var(--surface-text-staticwhite-normal);
    vertical-align: bottom;
}

.footer_logo {
    display: block;
    text-align: center;
    position: sticky;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: var(--surface-background-gray-moderate);
    color: var(--ds-input-border);
    z-index: 9999;
}
.logo{display: block;}

.help_size {
    font-size: var(--fz-size-20) !important;
}
.components a {
    padding: 6px 16px;
}
.sidebar-submenu a {
    padding: 4px 16px;
}
ul.list-group {
    margin: 0 10px;
   }
.components ul li:last-child {
    margin-bottom: 10px;
}

.tabs-navigation {
    border-bottom: 1px solid var(--surface-border-gray-muted);
    gap: var(--tab-medium-bordered-horizontal-gap);
    display: flex;
    margin-bottom: 16px;
}


.component-header-button{
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--surface-background-gray-intense);
    cursor: pointer;
    color: var(--interactive-text-gray-subtle);
}

button span .icon {
    width: var(--button-small-main-icon, 16px);
    height: var(--button-small-main-icon, 16px);
    fill: var(--interactive-icon-gray-subtle);
}

.tab-link {
    font-family: 'Nunito Sans', sans-serif;
    color: var(--interactive-text-gray-muted);
    padding: var(--tab-large-bordered-horizontal-vertical-padding) 0;
    line-height: var(--line-height-300);
    font-size: var(--size-font-size-200);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: bold;
    user-select: none;
    position: relative;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.tab-link.active {
     border-bottom-color: var(--interactive-border-primary-default);
    color: var(--interactive-text-primary-subtle);
    color: var(--interactive-text-primary-subtle);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.component-wrapper .header-container{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 1rem;
}

#sidebar-container .list-group li.active a{
    color: var(--interactive-text-primary-normal);
}


/* input text css small*/
.form-control, .form-control:focus, .form-select{
    color: var(--surface-text-gray-subtle);
    background-color: var(--surface-background-gray-moderate);
}
.form-control::placeholder{
    color: var(--surface-text-gray-subtle);
}

.input-group-text  {
    background-color: transparent;
}

.input-group-text .icon-search, .input-group-text .icon-lock, .input-group-text .icon-dollar-sign, .input-group-text .icon-eye-off  {
    font-size: var(--fz-size-16);
}
.input_css .icon-eye-off {
    color: var(--interactive-icon-gray-muted);
}

.input_css .form-control::placeholder{
    color: var(--surface-text-staticblack-subtle) !important;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
}

.input_css .form-control {
    background-color: transparent;
}

.help_text {
    color: var(--surface-text-gray-muted);
    font-size: var( --fz-size-11);
    font-style: italic;
}
.form_label {
    color: var(--surface-text-gray-subtle);
    font-weight: var(--fw-700);
    font-size: var(--fz-size-12);
    margin-bottom: 6px;	
}
.input-group-text .link_color {
    color: var(--interactive-text-primary-normal);
    font-weight: var(--fw-700);
}

.input_css  {
    border: 1px solid;
    border-color: var(--interactive-border-gray-default);
    border-radius: var(--bradius-medium);
    padding-left: var(--input-textfield-large-horizontal-padding);
    padding-right: var(--input-textfield-large-horizontal-padding);
    background-color: var(--surface-background-gray-moderate);
}

 .input_css:hover {
    background-color: var(--interactive-background-gray-faded) ;
} 

.input_css.active {
    border-width: var(--bwidth-thick);
    border-color: var(--interactive-border-primary-default);
    background-color: var(--interactive-background-gray-faded);
}

.input_css.disabled  {
    border-color: var(--interactive-border-gray-disabled);
}

.input_css.disabled .input-group-text i, .input_css.disabled .input-group-text, .input_css.disabled .input-group-text .link_color, .input_css.disabled a, .input_css.disabled .link_color a {
    color: var(--surface-text-gray-disabled) ;
}
.input_css.disabled .input-group-text .link_color a{
    color: var(--interactive-text-primary-disabled) ;
}
.input_css .icon-loader {
    color: var(--surface-background-primary-intense) !important;
    font-size: var(--fz-size-16);
}

.input_css.success {
    border-width: var(--bwidth-thicker);
    border-color: var(--interactive-border-primary-default);
}

.input_css.success .icon-lock {
    color: var(--feedback-icon-positive-intense);
}
.help_success{
    color: var(--feedback-text-positive-intense);
}
.help_success i {
    font-size: var(--fz-size-12);
}
.input_css.error {
    border-color: var(--interactive-border-negative-default);
}
.input_css.error i.icon-lock{
    color: var(--feedback-icon-negative-intense);
}


.help_error{
    color: var(--feedback-text-negative-intense);
}
.help_error i {
    font-size: var(--fz-size-12);
}
.input-group-text .icon-lock {
    color: var(--surface-icon-gray-subtle);
}
.input-group-text {
    font-size: var(--fz-size-14);
}

.input_css .form-control {
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle);
}

.input_css:focus-within {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

.form-control:focus {
    box-shadow: none;
}

.input_small .input_css {
    height: var(--size-32);
}

.input_css span {
    color: var(--surface-text-gray-subtle);
}

.input_css.hover{
    background-color: var(--interactive-background-gray-faded);
}

/* input text medium */

.input_medium .input_css {
    height: var(--size-36);
}

/* input text large */
.input_large .input_css {
    height: var(--size-48);
}

.input_large .form-control {
    font-size: var(--fz-size-16);
}

.input_large .form-control::placeholder{
    color: var(--surface-text-staticblack-subtle) !important;
    font-size: var(--fz-size-16);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-24);
}

.input_large .input-group-text {
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
}
   

.input_large .input-group-text i {
    font-size: var(--fz-size-20);
}

.input_large .form_label {
    color: var(--surface-text-gray-subtle);
    font-weight: var(--fw-700);
    font-size: var(--fz-size-14);   
    line-height: var(--lineheight-24);
}

.input-wrapper { min-height: 120px;}
.label_position.input-wrapper .form_label {width: 120px;}

.input_css.disabled:hover{
    background-color: transparent;
    pointer-events: none !important;
}

.input_css.disabled .form-control::placeholder, .input_css.disabled .form-control {
    color: var(--surface-text-gray-disabled) !important;
}

.input_css a{color:var(--surface-text-gray-subtle); text-decoration: none;}
.input_css .link_color a{color: var(--interactive-text-primary-normal);}


/* textarea css */
.inputtextarea .form-control{
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle) !important;
    line-height: var(--lineheight-20); 
    background-color: var(--surface-background-gray-moderate);  
}
.form-control textarea:hover{
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle) !important;
    line-height: var(--lineheight-20); 
    background-color: var(--surface-background-gray-faded);  
}
.inputtextarea .form-control::placeholder{
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle) !important;
    line-height: var(--lineheight-20);    
}

.inputtextarea .form-control:focus{
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

.inputtextarea .form-control {
    border-color: var(--interactive-border-gray-default);
    border-width: var(--bwidth-thin);
    border-radius: var(--bradius-medium);
    height: 56px;
    color: var(--surface-text-gray-subtle);
    font-size: var(--fz-size-14);
}
.textarea-wrapper {
    height: 166px;
}
.inputtextarea .input-group .form-control:hover{
    background-color: var(--interactive-background-gray-faded);
}
.inputtextarea .input-group.active .form-control {
    background-color: var(--interactive-background-gray-faded);
    border-color: var(--interactive-border-primary-default);
    border-width: var(--bwidth-thick);
}

.inputtextarea .form-control:disabled {
    background-color: var(--surface-background-gray-intense);
}
.inputtextarea .disabled .form-control::placeholder, .inputtextarea .disabled .form-control {
    color: var(--surface-text-gray-disabled);
}

.inputtextarea.success .form-control {
    border-width: var(--bwidth-thick);
    border-color: var(--interactive-border-positive-default);
}
.inputtextarea.success .help_text {
    color: var(--feedback-text-positive-intense);
}
.inputtextarea.success .help_text i {
    font-size: var(--fz-size-12);
}

.inputtextarea.error .form-control {
    border-width: var(--bwidth-thick);
    border-color: var(--interactive-border-negative-default);
}

.inputtextarea.error .help_text {
    color: var(--feedback-text-negative-intense);
}

.inputtextarea.error .help_text i {
    font-size: var(--fz-size-12);
}

.inputtextarea .maxline3 .form-control {
    height: 76px;
}

.inputtextarea .maxline4 .form-control {
    height: 96px;
}

.inputtextarea .maxline5 .form-control {
    height: 116px;
}


.textarea_large .form_label {
    font-size: var(--fz-size-14);
}


.textarea_large .form-control {
    height: 64px;
    color: var(--surface-text-gray-subtle);
}

.textarea_large .form-control::placeholder{
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
    color: var(--surface-text-staticblack-subtle) !important;
}

.textarea_large .form-control {
    height: 64px;
    font-size: var(--fz-size-16);
}

.textarea_large .help_text { 
    font-size: var(--fz-size-14);
}


.textarea_large .maxline3 .form-control {
    height: 88px;
}

.textarea_large .maxline4 .form-control {
    height: 112px;
}

.textarea_large .maxline5 .form-control {
    height: 136px;
}

.inputtextarea .input-group.disabled .form-control:hover {
    pointer-events: none;  
    background-color: var(--surface-background-gray-intense);  
}


.inputtextarea .input-group .form-control.hover {
    background-color: var(--surface-background-gray-moderate);
}

/* input otp css */

.input_otp.form-control {
    border: var( --bwidth-thin) solid var(--interactive-border-gray-default) !important;
    border-radius: var(--bradius-medium);
    padding: var(--spacing-3) var(--spacing-4) !important;
    background-color: var(--surface-background-gray-moderate);
    text-align: center;
    height: 36px;
    font-size: var(--fz-size-20);
}

.input_otp.form-control::placeholder {
    font-size: var(--fz-size-20);
    color: var(--surface-text-staticblack-subtle) !important;
}

.input_large .input_otp.form-control {
    height: 48px;
}

.input_large .input_otp.form-control::placeholder, .input_large .input_otp.form-control {
    font-size: var(--fz-size-24);
    color: var(--surface-text-staticblack-subtle) !important;
}

.input_large .help_text {
    font-size: var(--fz-size-14);
}

.input_otp.hover {
    background-color: var(--surface-background-gray-intense);
} 

.input_otp:hover {
    background-color: var(--surface-background-gray-intense);
}

.input_otp.active {
    border: var(--bwidth-thicker) solid var(--interactive-border-primary-default) !important;
    background-color: var(--surface-background-gray-moderate);
    border-radius: var(--bradius-medium) !important;
}

.input_otp.disabled:hover {
    background-color: transparent;
    pointer-events: none;
}

.input_otp.disabled.form-control::placeholder, .input_otp.disabled.form-control {
    color: var(--surface-text-gray-disabled);
}

.input_otp.success {
    border-width: var(--bwidth-thicker) !important;
    border-color: var(--interactive-border-primary-default) !important;
    background-color: var(--surface-background-gray-intense);
}
.input_otp.error {
    border-color: var(--interactive-border-negative-default) !important;
}

.input-wrapper .break {
    color: var(--surface-text-gray-disabled);
    margin-left: 1px !important;
    text-align: center;
    font-size: var(--fz-size-20);
    background-color: var(--popup-background-subtle);
}

.input_otp:focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

/* radio button css */

.radio_wrapper .form-check-input {
    margin-top: 0;
    margin-right: 8px;
}


.radio_wrapper .form-check-input:hover {
    background-color: var(--interactive-background-gray-faded);
}

.radio_wrapper .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

.radio_wrapper .form-check-input:checked:hover {
    background-color: var(--interactive-background-primary-highlighted);
}

.radio_wrapper .form-check-input:checked {
    background-color: var(--interactive-background-primary-default);
    border: none;
}

.small_radio .form-check-input {
    width: 12px;
    height: 12px;
    border: var(--bwidth-thick) solid var(--interactive-border-gray-default);
}

.small_radio .form-check-label {
    font-size: 12px;
    color: var(--surface-text-gray-subtle);
    line-height: var(--lineheight-18);
}

.medium_radio .form-check-input {
    width: 16px;
    height: 16px;
    border: var(--bwidth-thick) solid var(--interactive-border-gray-default);
}

.medium_radio .form-check-label {
    font-size: 14px;
    color: var(--surface-text-gray-subtle);
    line-height: var(--lineheight-20);
}

.large_radio .form-check-input {
    width: 20px;
    height: 20px;
    border: var(--bwidth-thick) solid var(--interactive-border-gray-default);
}

.large_radio .form-check-label {
    font-size: 16px;
    color: var(--surface-text-gray-subtle);
    line-height: var(--lineheight-24);
}

.radio_wrapper .form-check-input.hover {
    background-color: var(--interactive-background-gray-faded);
}

.radio_wrapper.disabled .form-check-input {
    border: var(--bwidth-thick) solid var(--interactive-border-gray-disabled);
}
.radio_wrapper.disabled .form-check-label {
    color: var(--surface-text-gray-disabled);
}

.radio_wrapper.disabled .form-check-input:checked {
    background-color: var(--interactive-background-primary-disabled) !important;
}

.radio_wrapper.error .form-check-input {
    border: var(--bwidth-thick) solid var(--interactive-border-negative-default);
}
.radio_wrapper.error .form-check-input:checked {
    background-color: var(--interactive-border-negative-default);
}
.form-check.radio_wrapper {
    margin-bottom: 0;
}

.help_text.radio_text {
    font-size: var(--fz-size-14);;
    margin-bottom: 0;
}

.error_text.radio_text {
    color: var(--feedback-text-negative-intense);
}

.error_text.radio_text i {
    font-size: var(--fz-size-14);
}

.radio_wrapper .form-check-input.hover:checked {
    background-color: var(--interactive-background-primary-default);
    border: none;
}

/* switch css */

.form-switch.switch_wrapper .form-check-input {
    background-image: url(../svg/thumb-circle.svg);
}

.switch_wrapper .form-check-input {
    background-color: var(--interactive-background-staticwhite-disabled); 
    padding: var(--switch-small-padding);
    border: none;
}

.form-switch.switch_wrapper .form-check-input:checked {
    background-position: right center;
    background-image: url(../svg/thumb-check.svg);
}


.switch_wrapper .form-check-input:checked {
    background-color: var(--interactive-background-primary-default);
    border-color: var(--interactive-background-primary-default);
}

.switch_wrapper .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-color: var(--transperent);
}

.switch_wrapper.switch_small .form-check-input {
    width: 28px;
    height: 16px;
}

.switch_wrapper.switch_medium .form-check-input {
    width: 36px;
    height: 20px;
}

.switch_wrapper .form-check-input:hover {
    background-color: var(--interactive-background-gray-highlighted);
}
.switch_wrapper .form-check-input:checked:hover {
    background-color: var(--interactive-background-primary-highlighted);
}
.switch_wrapper.hover .form-check-input {
    background-color: var(--interactive-background-gray-highlighted) !important;
}
.switch_wrapper.hover .form-check-input:checked {
    background-color: var(--interactive-background-primary-highlighted) !important;
}
.switch_wrapper.disabled  .form-check-input {
    background-color: var(--interactive-background-gray-disabled);  
    border: none;
}

.switch_wrapper.disabled .form-check-input:checked {
    background-color: var(--interactive-background-primary-disabled);  
}


/* checkbox css start */
.form-check-input {
    --bs-form-check-bg: transparent;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.check_wrapper .form-check-input[type=checkbox] {
    border-radius: var(--bradius-small);
}

.check_wrapper .form-check-input {
    border: var(--bwidth-thick) solid var(--interactive-border-gray-default);
   margin-top: 0;
}

.check_wrapper.check_small .form-check-input {
    width: 12px;
    height: 12px;
}
.check_wrapper label {
    color: var(--surface-text-gray-subtle);
    margin-left: 10px;
}

.check_wrapper.check_small label {
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
}

.check_wrapper.check_medium label {
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
}

.check_wrapper.check_large label {
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
}


.check_wrapper .form-check-input:checked {
background-color: var(--interactive-background-primary-default);
border: none;
}

.check_wrapper .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--surface-background-primary-intense) !important;
}
 
.check_wrapper .form-check-input:hover {
    background-color: var(--interactive-background-gray-faded);
}

.check_wrapper .form-check-input:checked:hover {
    background-color: var(--interactive-background-primary-highlighted);
} 


.check_wrapper.check_medium .form-check-input {
    width: 16px;
    height: 16px;
}

.check_wrapper.check_large .form-check-input {
    width: 20px;
    height: 20px;
}

.check_wrapper.hover .form-check-input {
    background-color: transparent;
}

.check_wrapper.hover .form-check-input:checked {
    background-color: var(--interactive-background-primary-highlighted);
} 

.check_wrapper.disabled .form-check-input {
    border: var(--bwidth-thick) solid var(--interactive-border-gray-disabled);
}
.check_wrapper.disabled label {
    color: var(--surface-text-gray-disabled);
}

.check_wrapper.disabled .form-check-input:checked {
    background-color: var(--interactive-background-primary-disabled);
    border: none;
}

.check_wrapper.error .form-check-input {
    border: var( --bwidth-thicker) solid var(--interactive-border-negative-default);
}
.check_wrapper.error .form-check-input:checked {
    background-color: var(--interactive-background-negative-default);
}

.help_text.check_help_small {
    font-size: var(--fz-size-11);
}

.help_text.check_help_large {
    font-size: var(--fz-size-14);
}


.help_text.error_check_text {
    font-size: var(--fz-size-11);
    color: var(--feedback-text-negative-intense);
}
.help_text.error_check_text i{
    font-size: var(--fz-size-11);
}

.intermediate .form-check-input:checked[type=checkbox] {
    background-image: url(../svg/union.svg) ;
}





/* Global Header CSS */

.header-wrapper .header {
    position: initial !important;
}
.header-wrapper .header .i3_header {
    min-height: 56px;
}

.header-wrapper .vr {
    vertical-align: middle;
    color: var(--normal);
    
    margin: 0 7px;
    height: 20px;
    display: inline-block;
    align-self: center;
}

.header-wrapper .dropdown-toggle::after {
    display: none;
}
.hide-arrow::after{
    display: none;
}
.header-wrapper .dropdown-menu[data-bs-popper] {
   left: auto;
   right: 0;
}

.user_details .dropdown-menu {
    background-color: var(--surface-background-gray-subtle);
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
    border-radius: var(--bradius-medium);
    margin-top: 7px;
    width: auto;
    min-width: 130px;
    box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
}


.user_details .dropdown-divider {
   border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}

.user_details .dropdown-menu .dropdown-item {
    width: auto;
}

.user_details .dropdown-menu .dropdown-item {
    padding-top: var(--actionlistitem-contenttype-default-padding-vertical); 
    padding-bottom: var(--actionlistitem-contenttype-default-padding-vertical); 
    padding-left: var(--actionlistitem-contenttype-default-padding-horizontal);
    padding-right: var(--actionlistitem-contenttype-default-padding-horizontal);
    color: var(--interactive-text-gray-normal);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-weight: var(--fw-400);
    cursor: pointer;
}

.user_details .dropdown-menu .dropdown-item i {
    color: var(--interactive-text-gray-normal);
    font-size: var(--fz-size-20);
    margin-right: 10px;
}

.user_details .dropdown-menu .dropdown-item.active {
    background-color: var(--interactive-background-primary-faded);   
    border-radius: var(--actionlistitem-contenttype-default-borderradius);
} 

.user_details .dropdown-menu .dropdown-item.logout, .user_details .dropdown-menu .dropdown-item.logout i {
   color: var(--interactive-text-negative-normal); 
}

.user_details .user_name {
    padding: 10px 14px;
}

.user_name .user_role h6 {
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-16);
    font-weight: var(--fw-700);
}

.user_name .user_role span {
    color: var(--surface-text-gray-muted);
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
}

.user_details .dropdown-item:hover {
    background-color: var(--interactive-background-gray-default);
}

.user_details .dropdown-item {
    border-radius: var(--bradius-medium);
}

.user_details .dropdown-item.active:hover {
    background-color: var(--interactive-background-primary-fadedHighlighted);
}


.user_details .dropdown-item {
    display: flex;
    align-items: center;
}

.user_details.language .dropdown-toggle {
    color: var(--interactive-text-staticwhite-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
}


.user_details.language .dropdown-toggle i {
    font-size: var(--fz-size-12);
    margin-left: 4px;
}

.user_details.language {
     display: flex;
     justify-content: center;
     align-items: center;
	 position: relative;
     font-size: var(--fz-size-14);
     margin-right: 5px;
}
.user_details {position: relative;}
.navbar-expand-lg .navbar-nav .dropdown-menu{ top:42px; left: -140px}

.user_details.language a {
    padding-left: var(--button-xsmall-horizontal-padding) !important;
    padding-right: var(--button-xsmall-horizontal-padding) !important; 
    height: 28px;
    background-color: var(--interactive-background-staticbwhite-faded);
    border-radius: var(--bradius-medium);
    display: flex;
    align-items: center; 
}

.user_details.language .dropdown-menu[data-bs-popper] {
    top: 42px;
}






.navbar.res_header .i3_logo img{height: 24px;}
.navbar.res_header .public_logo img{ height: 40px;}
.navbar.res_header .public_logo1 img{ height: 14px;}
.navbar.small_header .public_logo img{ height: 40px;}






.i3_header .navbar.res_header {
        padding: 5px;
}

.mobile_menu i {
    color: var(--interactive-text-onprimary-normal);
}

.header-wrapper.mobile_header .navbar-expand-lg .navbar-toggler.mobile_view {
    display: block;
}

.header-wrapper.mobile_header .i3_header {
    width: 320px;
}

.header-wrapper.mobile_header a.i3_logo img {
    width: 90px;
}

.header-wrapper.mobile_header .vr.left_line {
    margin: 0 2px;
}
.header-wrapper.mobile_header .header .i3_header {
    min-height: 44px;
}
 .right_menu .icon-menu {
    color: var(--interactive-text-onprimary-normal);
    vertical-align: middle;  
}

.right_menu {
    border: none;
}

.navbar-toggler.right_menu:focus {
    box-shadow: none !important;
}


/* how to use it for designer */
.design_wrapper h4 {
    background-color: var(--surface-border-gray-muted);
    padding: 10px 15px;
    border-radius: var(--bradius-medium);
    margin-bottom: 30px;
}

.design_wrapper ul li {
    list-style-type: disc;
    margin-left: 15px;
}


/* modal-css */

.modal_wrapper .modal-content {
    border: none;
    box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
    border-radius: var(--bradius-large);
    background-color: var(--popup-background-subtle);
}

.modal_wrapper .modal-header {
    min-height: 82px;
    padding: var(--spacing-5);
    justify-content: space-between;
}

.modal_wrapper .modal-header .modal-title {
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
    font-weight: var(--fw-700);
    color: var(--surafec-text-gray-normal);
}

.modal_wrapper .modal-header span {
    color: var(--surface-text-gray-muted);
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
}

.modal_wrapper .modal-header .btn-icon-20 {
    color: var(--interactive-icon-gray-muted);
}

.modal_wrapper .modal-footer {
    display: block;
    text-align: right;
}

.modal_wrapper .modal-footer {
    border-top: var(--bradius-xsmall) solid var(--surface-border-gray-muted);
}

.modal_wrapper .modal-header {
    border-bottom: var(--bradius-xsmall) solid var(--surface-border-gray-muted);
}

.modal_sm .modal-content {
    width: 400px;
}

.modal_static {
    z-index: 0;
}

.modal_button .modal-dialog {
    margin-top: 90px;
}

.modal_wrapper .modal-body {
    min-height: 80px;
    overflow-y: auto;
    max-height: 400px;
}


/* table css start */
.table-wrapper{ position: relative; overflow-x: auto;}

.table-wrapper thead th {
    background-color: var(--interactive-background-gray-default) !important;
    padding: var(--spacing-5) var(--spacing-4);
}
.table-wrapper tbody td, td {
    background-color: var(--surface-background-gray-moderate) !important;
    padding: var(--spacing-5) var(--spacing-4);
}

.table-wrapper th a.sort_arrow:before {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e842';
    font-family: "feather";
    position: absolute;
    right: 5%;
    top: 38%;
    color: var(--interactive-icon-gray-muted);
}

.table-wrapper th a.sort_arrow:after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e845';
    font-family: "feather";
    position: absolute;
    right: 5%;
    top: 18%;
    color: var(--interactive-icon-gray-muted);
    
}


.table-wrapper thead th a {
    text-align: right;
    float: right;
    width: 14px;
    height: 18px;
    content: '';
}


.table-wrapper th {
    position: relative;
    color: var(--surafec-text-gray-normal);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-weight: var(--fw-700);
}

.table-wrapper th a.sort_arrow.active:after  {
    color: var(--interactive-icon-primary-subtle);
}

.table-wrapper tr td {
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    padding: var(--spacing-4);
}

td .icon_details {
    font-size: var(--fz-size-18);
    color: var(--surface-icon-gray-normal);
    vertical-align: middle;
    margin-right: 3px;
}

.table-wrapper td sub {
    bottom: 0;
}
.table-wrapper td .numbers {
    font-weight: var(--fw-700);
}

.table-wrapper td.mobile_number {
    text-align: right;
}

.table-wrapper td .action_button i {
    font-size: var(--fz-size-16);
    color: var(--interactive-icon-primary-normal);
}

.table-wrapper td .action_button a {
    font-weight: var(--fw-700);
    color: var(--interactive-icon-primary-normal);
    text-decoration: none;
    
}

.table-wrapper tr td {
    border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}

.table-wrapper tr th {
    border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}


.table-wrapper .label_details i {
    font-size: var(--fz-size-10);
    color: var(--surface-icon-gray-normal);
}

.table-wrapper .label_details {
    font-weight: var(--fw-600);
}

.table-wrapper .icon_size a{
    font-size: var(--fz-size-20);
    color: var(--surafce-icon-gray-normal);
    text-decoration: none;
}

.table-wrapper tr.compact td {
    padding: var(--spacing-4);
} 

.table-wrapper tr.expanded td {
    padding: var(--spacing-6);
    padding-left: var(--spacing-4);
} 

.table-wrapper tr.condensed td {
    padding: var(--spacing-3);
} 


.table-wrapper tr:hover td {
    background-color: var(--interactive-background-gray-default) !important;
    cursor: pointer;
}

.table-wrapper tr td:focus {
    outline: 2px solid var(--surface-background-primary-intense);
    border-radius: var(--bradius-small);
}

.table-wrapper tr td.active {
    background-color: var(--interactive-background-gray-default);
}

.table-wrapper tr td.hover {
    background-color: var(--interactive-background-gray-default);
}

.table-wrapper tr td.focus {
    outline: 2px solid var(--surface-background-primary-intense);
    border-radius: var(--bradius-small);
}


.input_text .input-wrapper {
    min-height: auto;
}


.table-wrapper tr th {
    vertical-align: middle;
}

.pagination .form-select {
    font-size: var(--fz-size-14);
}


.header_button {
    background-color: var(--surface-background-gray-intense);
    padding: 16px;
    padding-bottom: 0;
}
.details{
    font-size: var(--fz-size-14);
}

.right_button .dropdown-toggle::after {
    display: none;
}

.user_details .dropdown-menu {
    background-color: var(--surface-background-gray-subtle);
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
    border-radius: var(--bradius-medium);
    margin-top: 7px;
    width: auto;
    min-width: 200px;
    box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
}

.right_button a {
    margin: 3px 6px;
}

.table{ margin-bottom: 0px !important;}

.table_Details {
    background-color: var(--surface-background-gray-intense);
    border: 1px solid var(--surface-border-gray-muted);
}

.summary_details {
    background-color: var(--feedback-background-neutral-subtle);
    padding: 16px 40px;
}

.summary_details span {
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--line-height-20);
}

.header_button .items {
    color: var(--surface-text-gray-subtle);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--line-height-20);
}





/* pagination css start */

.page_wrapper .page-link span i {
    font-size: var(--fz-size-18) !important;
    vertical-align: middle;
}

.page_wrapper .page-link {
    color: var(--surface-text-gray-subtle);
    font-size: var(--fz-size-14);
    line-height: var(--line-height-20);
    background-color: var(--transperent);
    border: none;
    border-radius: var(--bradius-medium);   
}

.page_wrapper a.arrow {
    background-color: var(--interactive-background-gray-default); 
}

.page_wrapper a.arrow:hover {
    background-color: var(--interactive-background-gray-highlighted);
}

.page_wrapper a.arrow:focus {
    background-color: var(--interactive-background-gray-highlighted);
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

.page_wrapper a.icon_bg {
    padding: 6px 8px;
}

.page_wrapper .page-item:first-child .page-link {
    border-radius: var(--bradius-medium);
}

.page_wrapper .page-link:hover {
    background-color: var(--interactive-background-gray-default);
}

.page_wrapper .page-link:focus {
    background-color: var(--interactive-background-gray-default);
    outline: 2px solid var(--surface-background-primary-intense) !important;
    box-shadow: none;
} 

.page_wrapper .page-link.active {
    background-color: var(--interactive-background-gray-default);
}

.page_wrapper .page-link.select {
    background-color: var(--interactive-background-primary-faded);
    color: var(--surface-text-primary-normal);
}

.page_wrapper .page-item.disabled .page-link {
    background-color: var(--interactive-background-gray-disabled);
    color: var(--interactive-icon-gray-disabled);
}

.page_wrapper li.page-item {
    margin-right: 5px;
}

.page_wrapper .total_pages {
    margin: 0px 10px 0 5px;
}

.page_wrapper .form-select {
    background-color: var(--interactive-background-gray-default);
    border-top-left-radius: var(--bradius-small);
    border-top-right-radius: var(--bradius-small);
    border-bottom-left-radius: var(--bradius-none);
    border-bottom-right-radius: var(--bradius-none);
    border-bottom: var(--bwidth-thin) solid var(--interactive-background-gray-highlighted);
}

.page_wrapper .pagination {
    display: flex;
    align-items: center;
}



.table-wrapper .pagination_details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}



/* divider */


.divider-h-thin {
    border-top: var(--bwidth-thin) solid var(--surface-border-gray-normal);  
    margin: 1rem 0; 
}
.divider-h-thick {
    border-top: var(--bwidth-thick) solid var(--surface-border-gray-normal); 
    margin: 1rem 0;  
}
.divider-h-thicker {
    border-top: var(--bwidth-thicker) solid var(--surface-border-gray-normal); 
    margin: 1rem 0; 
}
.divider-h-subtle {
    border-top: var(--bwidth-thin) solid var(--surface-border-gray-subtle); 
    margin: 1rem 0;
}
.divider-h-muted {
    border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); 
    margin: 1rem 0;
}

.bg-gray {
    background-color: #fff;
}

.divider-h-dashed {
    border-top: var(--bwidth-thin) dashed var(--surface-border-gray-normal); 
    margin: 1rem 0;
}

.divider-v-thin {
    min-height: 85px;
    width: var(--bwidth-thin);
    background-color: var(--surface-border-gray-normal);
    margin: 0 10px;  
}
.divider-v-thick {
    min-height: 85px;
    width: var(--bwidth-thick);
    background-color: var(--surface-border-gray-normal);
    margin: 0 10px;  
}
.divider-v-thicker {
    min-height: 85px;
    width: var(--bwidth-thicker);
    background-color: var(--surface-border-gray-normal);
    margin: 0 10px;  
}
.divider-v-subtle {
    min-height: 85px;
    width: var(--bwidth-thin);
    background-color: var(--surface-border-gray-subtle);
    margin: 0 10px; 
}
.divider-v-muted {
    min-height: 85px;
    width: var(--bwidth-thin);
    background-color: var(--surface-border-gray-muted);
    margin: 0 10px; 
}

.divider-v-dashed {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--surface-border-gray-normal); 
    margin: 0 10px; 
}

.divider-v-dashed-thick {
    min-height: 85px;
    width: var(--bwidth-thick);
    border: var(--bwidth-thick) dashed var(--surface-border-gray-normal); 
    margin: 0 10px; 
}

.divider-v-dashed-thicker {
    min-height: 85px;
    width: var(--bwidth-thicker);
    border: var(--bwidth-thicker) dashed var(--surface-border-gray-normal); 
    margin: 0 10px; 
}

.divider-v-dashed-normal {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--surface-border-gray-normal); 
    margin: 0 10px; 
}

.divider-v-dashed-subtle {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--surface-border-gray-subtle); 
    margin: 0 10px; 
}
.divider-v-dashed-muted {
    min-height: 85px;
    width: var(--bwidth-thin);
    border: var(--bwidth-thin) dashed var(--surface-border-gray-muted); 
    margin: 0 10px; 
}


.divider-h-dashed-thick {
    border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); 
    margin: 1rem 0; 
}

.divider-h-dashed-thicker {
    border-top: var(--bwidth-thicker) dashed var(--surface-border-gray-normal); 
    margin: 1rem 0;  
}

.divider-h-dashed-normal {
    border-top: var(--bwidth-thick) dashed var(--surface-border-gray-normal); 
    margin: 1rem 0;
}
.divider-h-dashed-subtle {
    border-top: var(--bwidth-thick) dashed var(--surface-border-gray-subtle); 
    margin: 1rem 0;
}
.divider-h-dashed-muted {
    border-top: var(--bwidth-thick) dashed var(--surface-border-gray-muted); 
    margin: 1rem 0;
}


/* Tab page - CSS */
 
.tab_wrapper .tab_icon {
    font-size: var(--fz-size-16);
    margin-right: 5px;
}
 
.tab_wrapper .nav-link .badge-md {
    vertical-align: middle;
}
 
 
.tab_wrapper.tab_small .nav-link {
   color: var(--interactive-text-gray-muted);
   font-size: var(--fz-size-12);
   line-height: var(--lineheight-18);
   font-weight: var(--fw-700);
   border-radius: var(--bradius-none);
   padding: var(--tab-small-bordered-horizontal-vertical-padding);
}
 
.tab_wrapper.tab_medium .nav-link {
    color: var(--interactive-text-gray-muted);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-weight: var(--fw-700);
    border-radius: var(--bradius-none);
    padding: var(--tab-medium-bordered-horizontal-vertical-padding);
 }
 
 .tab_wrapper.tab_large .nav-link {
    color: var(--interactive-text-gray-muted);
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
    font-weight: var(--fw-700);
    border-radius: var(--bradius-none);
    padding: var(--tab-medium-bordered-horizontal-vertical-padding);
 }
 
 .tab_wrapper.tab_width .nav-link {
    padding-left: 0;
    padding-right: 0;
    margin-right: var(--size-32);
 }
 
.tab_wrapper ul {
    border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}
 
.tab_wrapper.tab_border ul {
    border-bottom: none;
}
 
 
.tab_wrapper .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    border-bottom: var(--bwidth-thicker) solid var(--interactive-border-primary-default);
    background-color: var(--transperent);    
    color: var(--interactive-text-primary-normal);
    color: var(--interactive-text-primary-normal);
}
 
.tab_wrapper .nav-link:hover {
    color: var(--interactive-text-gray-subtle);
    border-bottom: var(--bwidth-thicker) solid var(--interactive-background-gray-highlighted);
}
 
.tab_wrapper .nav-link:focus {
    outline: 2px solid var(--muted) !important;
    border-radius: var(--bradius-small);
    color: var(--interactive-text-gray-subtle);
}
 
.tab_wrapper .nav-link.disabled {
    color: var(--interactive-text-gray-disabled);
}
 
.tab_filled ul {
    background-color: var(--surface-background-gray-intense);
    border: 1px solid var(--interactive-border-gray-faded);
    border-radius: var(--bradius-small);
}
 
.tab_filled .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--interactive-background-primary-faded);
    color: var(--interactive-text-primary-normal);
    border-radius: var(--bradius-small);
}
 
.tab_filled .nav-item {
    padding: 5px;
    position: relative;
}
 
.tab_filled .nav-link {
    color: var(--interactive-text-gray-muted);  
    font-weight: var(--fw-700);
    border-radius: var(--bradius-none);  
}
 
.tab_filled .nav-link:after {
    content: "";
    position: absolute;
    border-top: 15px solid var(--subtle);
    width: 1px;
    top: 35%;
    right: 2%;
}
 
.tab_filled .nav-item:last-child .nav-link::after {
    display: none;
}
.tab_filled .nav-link.active::after{
    display: none;
}
 
.tab_filled .nav-link:hover {
    background-color: var(--interactive-background-gray-default);
    color: var(--interactive-text-gray-subtle);
}
.tab_filled .nav-link:focus {
    outline: 2px solid var(--muted) !important;
    border-radius: var(--bradius-small);
    color: var(--interactive-text-gray-subtle);
    background-color: var(--interactive-background-gray-default) ;
}
 .tab_filled .nav-link.disabled {
    color: var(--interactive-text-gray-disabled);
}
 
.tab_filled.tab_small .nav-link{
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
}
 
.tab_filled.tab_medium .nav-link{
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
}
 
.tab_filled.tab_large .nav-link{
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
}
 
.tab_vertical .nav-link {
    text-align: left;
    min-width: 112px;
    max-width: 130px;
}
 
.tab_vertical .nav-pills {
    padding: 3px;
    background-color: var(--surface-background-gray-intense);
    border: 1px solid var(--interactive-border-gray-faded);
    border-radius: var(--bradius-small);
}
 
.tab_border1 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    border-left: var(--bwidth-thicker) solid var(--interactive-border-primary-default);
    background-color: var(--transperent);
    border-radius: var(--bradius-none);
}
 
.tab_filled.tab_vertical .nav-link:after {
    display: none;
}
 
.tab_border1 .border_line .nav-link {
    border-left: var(--bwidth-thin) solid var(--interactive-text-gray-disabled);
}
 
.tab_border1  .nav-link:hover {
    background-color: var(--transperent);
    color: var(--interactive-text-gray-subtle);
    border-left: var(--bwidth-thicker) solid var(--interactive-background-gray-highlighted);
}
 
 
.tab_border1 .nav-link:focus {
    background-color: var(--transperent);
}
 
 
 
/* progress bar CSS start */
 
.progress_wrapper .progress, .progress-stacked {
    background-color: var(--feedback-background-neutral-subtle);
    border-radius: var(--bradius-none);
}
 
.progress_wrapper .progress-bar.primary {
    background-color: var(--surface-background-primary-intense);
}
 
.progress_wrapper .label_bar span, .progress_wrapper .progress_label{
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
    color: var(--surface-text-gray-subtle);
}
 
.progress_wrapper .label_bar {
    margin-bottom: 8px;
}
 
.progress_wrapper.p_small .progress, .progress-stacked {
    height: 2px;
}
 
.progress_wrapper.p_large .progress, .progress-stacked {
    height: 4px;
}
 
.progress_wrapper .progress-bar.positive {
    background-color: var(--feedback-background-positive-intense);
}
 
.progress_wrapper .progress-bar.negative {
    background-color: var(--feedback-background-negative-intense);
}
 
.progress_wrapper .progress-bar.notice {
    background-color: var(--feedback-background-notice-intense);
}
 
.progress_wrapper .progress-bar.information {
    background-color: var(--feedback-background-information-intense);
}
 
.progress_wrapper .progress-bar.neutral {
    background-color: var(--feedback-background-neutral-intense);
}
.animated-container{
    overflow: hidden;
    position: relative;
}
.animated-bar{
    animation: 1000ms linear 0s infinite normal none running animatedbar;
    position: absolute;
    width: 10%;
    background-color: rgb(46, 91, 255);
    height: 2px;

}
 
@keyframes animatedbar {

0% {
    left: 0%;
    transform: scaleX(1);
}
50% {
    left: 50%;
    transform: scaleX(5);
}
100% {
    left: 100%;
    transform: scaleX(1);
}
}
 
 
 
/* List group css */
 
.list_wrapper {
    padding: 10px;
}
.list_wrapper ul {
    list-style-type: disc;
}
 
.list_wrapper ul li {
    color: var(--surface-text-gray-normal);
    font-weight: var(--fw-600);
    margin-bottom: 4px;
}
 
.list_wrapper ol li {
    color: var(--surface-text-gray-normal);
    font-weight: var(--fw-600);
    margin-bottom: 4px;
}
 
.list_wrapper ul:nth-child(3) {
    list-style-type: circle;
    padding-left: 1rem;
}
 
.list_wrapper ul:nth-child(2) {
    list-style-type: square;
    padding-left: 1rem;
}
 
.icon_list ul:nth-child(3) {
    list-style-type: none;
}
 
.icon_list ul:nth-child(2) {
    list-style-type: none;
}
 
.icon_list ul, .icon_list ol {
    list-style-type: none;
}
 
.icon_list ul li i, .icon_list ol li i {
    font-size: var(--fz-size-12);
    margin-right: 5px;
}
 
.list_wrapper ul li a, .list_wrapper ol li a{
    color: var(--interactive-text-primary-normal);
    text-decoration: underline;
}
 
.list_wrapper ul.small li {
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);  
}
 
.list_wrapper ul ::marker {
    color: var(--listItemAsset-color);
}
 
.list_wrapper ul.medium li {
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
}
 
.list_wrapper ul.large li {
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
}
 
 
 
.list_wrapper ol.small li {
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);  
}
.list_wrapper ol.medium li {
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
}
 
.list_wrapper ol.large li {
    font-size: var(--fz-size-16);
    line-height: var(--lineheight-24);
}
 
 
 
.list_wrapper ul li .number, .list_wrapper ol li .number {
    background-color: var(--feedback-background-neutral-subtle);
    color: var(--surafec-text-gray-subtle);
    width: 18px;
    height: 18px;
    margin-right: 8px;
    margin-bottom: 0;
    border-radius: 50%;
    text-align: center;
    font-size: var(--fz-size-10);
}
 
 
 
.custom_icon ul li, .custom_icon ol li {
    display: flex;
}
 
 
.list_wrapper .text-white {
    padding: 2px 5px;
}
.list_wrapper .text_bg {
    background-color: var(--interactive-text-gray-subtle);
}

.text_bg i {
    font-size: var(--fz-size-12);
}
 
.list_wrapper .netural {
    color: var(--interactive-text-neutral-normal);
}
 
.list_wrapper ul li a:hover, .list_wrapper ol li a:hover{
    text-decoration: none;
}
 
.list_wrapper ul li a:focus, .list_wrapper ol li a:focus {
    text-decoration: underline;
    outline: 2px solid var(--surface-background-primary-intense) !important;
}
 
.list_wrapper ul li a.action, .list_wrapper ol li a.action {
    font-weight: var(--fw-700);
}
 
.list_wrapper ul li a.hover {
    text-decoration: underline;
}
 
 
.list_wrapper ul li a.focus {
    text-decoration: underline;
    outline: 2px solid var(--surface-background-primary-intense) !important;
}
 
.list_wrapper ul li a.disabled {
    color: var(--interactive-text-primary-disabled);
}
 
.icon_link i {
    font-size: var(--fz-size-12);
    vertical-align: middle;
}

/* tooltip css */
 
 
.custom-tooltip {
    --bs-tooltip-bg: var(--popup-background-subtle);
    --bs-tooltip-color: var(--surface-text-staticblack-normal);
    border: var(--bwidth-thin) solid var(--popup-border-subtle);
    background-color: var(--popup-background-subtle);
    border-radius: var(--bradius-medium);
    opacity: 1 !important;
    box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
}
 
 
.tooltip-inner {
    text-align: left;
    padding: 10px;
}
 
.tooltip-inner h6 {
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-weight: var(--fw-700);
    color: var(--surface-text-staticblack-subtle);
    margin-bottom: 2px;
}
 
.tooltip-inner p {
    margin-bottom: 0;
    font-size: var(--fz-size-12);
    line-height: var(--lineheight-18);
    font-weight: var(--fw-400);
    color: var(--surface-text-staticblack-subtle);
}
 
.custom-tooltip.tooltip_none .tooltip-arrow {
  display: none !important;
}

.item {
    width: 500px;
    height: 200px;
    background-color: #BFDDDC;
    border:1px dashed #329E91;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--interactive-text-onprimary-normal);
  }
 
  .slick-dotted.slick-slider {
     margin-bottom: 0;
     display: flex;
     justify-content: center;
  }
 
 /* carousel css */
 
  .carousel {
    margin-top: 100px;
  }
 
  .carousel .slick-slide {
    filter: blur(0);
    transition: ease .3s;
   margin-right: 15px;
   margin-left: 15px;
  }
 
  .carousel .slick-slide.slick-center {
    filter: none;
    transform: scale(1, 1);
  }
 
  .arrows {
    width: 100%;
    display: flex;
    justify-content:  space-evenly;
    margin-top: 20px;
  }
 
  .arrows i {
      font-size: var(--fz-size-16);
      cursor: pointer;
      color: var(--interactive-icon-staticblack-muted);
      background-color: var(--interactive-background-staticwhite-default);
      height: 30px;
      width: 30px;
      vertical-align: middle;
      border-radius: 20px;
      box-shadow: 0px 8px 24px var(--elevation-midraised);
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .slick-dots li button:before {
     font-size: 10px !important;
     color: #79A3DC;
    }
 
    .slick-dots li {
     margin: 0px !important;
    }
 
    .slick-dots li.slick-active button:before {
     color: var(--interactive-icon-gray-muted) !important;
     opacity: 100%;
    }
 
    .slick-dots li button:before {
     font-size: 12px !important;
     color: #79A3DC;
     content: '' !important;
     height: 11px;
    width: 11px;
    background-color: #79A3DC ;
    border-radius: 50%;
    display: inline-block;
  }
 
  .slick-dots {
     bottom: -25%;
     display: inline-block;
     width: 30%;
  }
 
  .slick-dots li.slick-active {
     margin-right: 15px !important;
  }
 
  .slick-dots li.slick-active button:before {
     width: 30px;
      background-color: var(--interactive-icon-gray-muted);
      border-radius: 11px;
      height: 12px;
  }
 
  .slick-dots li button {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50%;
  }
 
  .slick-dots li.slick-active button {
    width: 30px !important;
    border-radius: 11px;
    height: 12px !important;
  }
 
  #content.active.c_design {
    overflow-x: hidden;
    height: calc(100vh - 48px);
    background-color: var(--surface-background-gray-subtle);
  }
 
 
  .padding_details {
    padding: 0 30px;
  }
 
  .arrows.arrow_position {
    justify-content: space-between;
    top: 43%;
    position: relative;
    z-index: 99;
  }
 
  .arrow_second i {
    background-color: var(--interactive-background-staticwhite-default);
    color: var(--interactive-text-staticblack-muted);
    border: var(--bradius-xsmall) solid var(--interactive-border-gray-faded);
    box-shadow: none;
  }
 
 
  .dotblue .slick-dots li.slick-active button:before {
    background-color: var(--interactive-icon-information-subtle);
  }
 
  .dotwhite .slick-dots li.slick-active button:before {
    background-color: var(--interactive-icon-staticwhite-normal);
  }
 
.arrows a {
    text-decoration: none;
    z-index: 2
}

/* popover css  */
.popover-title {
    margin: 0;
    display: flex;
    justify-content: space-between;    
}

.popover-title .title_css {
    font-size: var(--fz-size-16);
    color: var(--surface-text-gray-normal);
    margin-bottom: 0;
    line-height: var(--lineheight-24);
    font-weight: var(--fw-700);
}

.popover-content {
    margin-top: 10px;
}

.popover-content .button_details {
    margin-top: 15px;
    text-align: right;
}

.popover-content p {
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-weight: var(--fw-400);
    color: var(--surface-text-gray-subtle);    
    font-family: var(--typography-typefaces-body);
}

.popover {    
    /* max-width: 276px; */
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: var(--popup-background-subtle);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: var(--bradius-large);
    -webkit-box-shadow: 0px 8px 24px var(--elevation-midraised);
    box-shadow: 0px 8px 24px var(--elevation-midraised);
    /* line-break: auto; */
    padding: 15px;
    border: 1px solid var(--popup-border-subtle);
}

.popover .icon_close {
    text-decoration: none;
    position: absolute;
    right: 15px;

}

.popover .icon_close i {
    color: var(--interactive-icon-gray-muted);
    font-size: var(--fz-size-16);
    vertical-align: middle;
}
[data-popper-arrow]:after {
    content: "";
    visibility: visible;
    background: inherit;
    width: 9px;
    height: 9px;
    position: absolute;
    transform: rotate(45deg);
  }


[data-popover][role="tooltip"][data-popper-placement^="top"]
      > [data-popper-arrow]:before,
    [data-popover][role="tooltip"][data-popper-placement^="top"]
      > [data-popper-arrow]:after {
      border-bottom-width: 1px;
      border-right-width: 1px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="right"]
      > [data-popper-arrow]:before,
    [data-popover][role="tooltip"][data-popper-placement^="right"]
      > [data-popper-arrow]:after {
      border-bottom-width: 1px;
      border-left-width: 1px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="bottom"]
      > [data-popper-arrow]:before,
    [data-popover][role="tooltip"][data-popper-placement^="bottom"]
      > [data-popper-arrow]:after {
      border-top-width: 1px;
      border-left-width: 1px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="left"]
      > [data-popper-arrow]:before,
    [data-popover][role="tooltip"][data-popper-placement^="left"]
      > [data-popper-arrow]:after {
      border-top-width: 1px;
      border-right-width: 1px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="top"]
      > [data-popper-arrow] {
      bottom: -5px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="bottom"]
      > [data-popper-arrow] {
      top: 5px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="left"]
      > [data-popper-arrow] {
      right: 5px;
    }
    [data-popover][role="tooltip"][data-popper-placement^="right"]
      > [data-popper-arrow] {
      left: -5px;
    }
    [role=tooltip]>[data-popper-arrow]:after {
        border-style: solid;
        border-color: #fff;
    }
    
    [role=tooltip]>[data-popper-arrow]:before {
        border-style: solid;
        border-color: #fff;
    }
    
    [data-popper-arrow]:before {
        content: "";
        visibility: hidden;
        transform: rotate(45deg);
    }
    
    [data-popper-arrow], [data-popper-arrow]:before {
        background: inherit;
        width: 0px;
        height: 0px;
        position: absolute;
        
    }
    
    [data-popper-arrow]:after {
        content: "";
        visibility: visible;
        background: inherit;
        width: 9px;
        height: 9px;
        position: absolute;
        transform: rotate(45deg);
        top: -10px;
        border-radius: 1px;
    }
    [data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:before, [data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:after {
        border-top-width: 1px;
        border-right-width: 1px;
    }

/* .mvp-wrapper ul{} */
.mvp-wrapper ul li{padding-bottom: 24px; line-height: 20px; list-style:disc;}
.mvp-wrapper ul li a{color:#000; text-decoration: none; }
.mvp-wrapper ul li a:hover{font-weight: var(--fw-600);}


/* Accordion */
.accordion {
    width: 100%;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-5) var(--spacing-5);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
    line-height: var(--line-height-100);
    color: var(--surface-text-gray-normal);
    text-align: left;
    background-color: var(--transperent);
    border: var( --bradius-none) !important;
    
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
.accordion-button i {
    font-size: var(--fz-size-20);
    margin-right: var(--ps-08);
    color: var(--surface-icon-gray-normal );
}
.accordion-body p{
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle);
}

.accordion-button::after {
    flex-shrink: 0;
    margin-left: auto;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-icon-gray-subtle);
}
.accordion-button:not(.collapsed)::after {
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--interactive-icon-gray-subtle);
    font-family: 'feather' !important;
    background-image: none !important;
    transform: none;
}
.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: var( --bradius-none);
    border-top-right-radius: var( --bradius-none);
}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    border-bottom-right-radius: var( --bradius-none);
    border-bottom-left-radius:var( --bradius-none);
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--transperent);
    border: var( --bradius-none);
    border-bottom: 1px solid var(--surface-border-gray-muted);
    border-radius: var( --bradius-none) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--surface-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    z-index: 0;
    outline: 0;
    box-shadow: none !important;
    outline: var(--bradius-small) solid var(--surface-background-primary-intense) !important;
}

/* Card */

.display-flex{
    display: flex;
    align-items: center;
}

.pr{
    padding-right: var(--ps-10);
}
.card-demo{
    width:100%;
}

.card {
    padding: var( --spacing-7);
    border-radius: var(--bradius-medium);
    border: 1px solid var(--surface-border-gray-muted);
    background: var(--card-bg-intense);
}
.card .card-header{
    background: transparent;
    border-bottom: 1px solid var(--surface-border-gray-muted);
    padding: var(--ps-00);
    padding-bottom: var(--ps-12);
}

/* .card .card-header button{
    background: #78868F2E;
    border: none;
    color: #181B1D;
} */
/* .card .card-header button i{
    font-size: 16px;
} */

.card .card-footer{
    background: transparent;
    border-top: 1px solid var(--surface-border-gray-muted);
    padding: var(--ps-00);
    padding-top: var(--ps-12);
}

.card .card-body{
    padding: var(--ps-00);
    padding-top: var(--ps-12);
    padding-bottom: var(--ps-12);
}
.card-active{
    border: var(--bradius-small) solid var(--surface-background-primary-intense) !important;
}


/* Buttons & Action */

.mr-12{
    margin-right: var(--spacing-4);
}
.mr-16{
    margin-right: var(--spacing-5);
}
.content-align{
    display: flex;
    align-items: flex-start;
    text-align: left;
    flex-wrap: wrap;

}


.bg-dark{
    background-color: var(--interactive-icon-neutral-muted) !important;
    color: var(--interactive-text-onprimary-normal);
    padding: var(--spacing-4) var(--spacing-0);
    vertical-align: middle;
}

.btn {
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-primary-default);
    border: 1px solid var(--interactive-border-primary-default);
    font-size: var(--fz-size-14);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-3) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    flex: 1 0 0;
    width: max-content;
}
.btn:focus-visible {
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-primary-default);
    border-color: var(--surface-border-primary-muted);
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--surface-background-primary-intense) !important;
}

    .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
        color: var(--interactive-text-onprimary-normal);
        background-color: var(--interactive-background-primary-highlighted);
        border-color: var(--interactive-background-primary-default);
    }

.btn-primary:focus-visible {
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-primary-default);
    border-color: var(--surface-border-primary-muted);
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--surface-border-primary-muted) !important;
    
}

.btn-primary {
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--surface-background-primary-intense);
    border: 1px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
    width: max-content;
}
.btn-primary:hover {
    color: var(--interactive-text-onprimary-normal);
    background-color: var( --interactive-background-primary-highlighted);
    border: 1px solid var( --interactive-border-primary-highlighted); 
}

.btn-primary-disabled, .btn-primary-disabled:disabled{
    color: var(--interactive-text-primary-disabled) !important;
    background-color: var(--interactive-background-primary-disabled);
    border: 0px solid var(--interactive-border-primary-disabled); 
    pointer-events: none;
}
.btn-outline-primary {
    color: var(--interactive-text-primary-normal);
    background-color: var(--surface-background-primary-intense) 0;
    border: 1px solid var(--interactive-border-primary-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
    width: max-content;
}
.btn-outline-primary:hover{
    color: var(--interactive-text-primary-normal);
    background-color: var(--interactive-background-primary-faded);
    border: 1px solid var(--interactive-border-primary-default);  
}
.btn-outline-primary:focus, .btn-outline-primary:focus-visible, .btn-outline-primary:active {
    color: var(--interactive-text-primary-normal) !important;
    background-color: var(--interactive-background-primary-faded) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-primary-disabled, .btn-outline-primary-disabled:disabled{
    color: var(--interactive-text-primary-disabled) !important;
    background-color: var(--surface-background-primary-intense) 0;
    border: 1px solid var(--interactive-border-primary-disabled); 
    pointer-events: none;
}

.btn-tertiary{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border: 0px solid var(--interactive-background-gray-default);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
}
.btn-tertiary:hover{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-highlighted);
}

.btn-tertiary:focus, .btn-tertiary:focus-visible, .btn-tertiary:active {
    color: var(--interactive-text-gray-normal) !important;
    background-color: var(--interactive-text-gray-disabled) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-tertiary-disabled, .btn-tertiary-disabled:disabled{
    color: var(--interactive-text-gray-disabled) !important;
    background-color: var(--interactive-background-gray-disabled);
    border: 0px solid var(--interactive-background-gray-default);
    pointer-events: none;
}
.btn-white{
    color: var(--interactive-text-staticblack-muted);
    background-color: var(--interactive-background-staticwhite-default);
    border: 0px solid var(--surface-background-primary-intense);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-white:hover{
    color: var(--interactive-text-staticblack-muted);
    background-color: var(--interactive-background-staticwhite-highlighted);
    border: 0px solid var( --surface-text-primary-normal); 
}

.btn-white:focus, .btn-white:focus-visible, .btn-white:active {
    color: var(--interactive-text-staticblack-muted) !important;
    background-color: var(--interactive-background-staticwhite-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-white-disabled, .btn-white-disabled:disabled{
    color: var(--interactive-text-staticblack-disabled) !important;
    background-color: var(--interactive-background-staticwhite-disabled);
    border: 0px solid var(--interactive-border-primary-disabled); 
    pointer-events: none;
}

.btn-outline-white{
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticwhite-default) 0;
    border: 1px solid var(--interactive-border-staticwhite-highlighted);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-white:hover{
    color: var( --interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticbwhite-faded);
    border: 1px solid var(--interactive-background-staticwhite-default);  
}
.btn-outline-white:focus, .btn-outline-white:focus-visible, .btn-outline-white:active {
    color: var( --interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-staticbwhite-faded) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-white-disabled, .btn-outline-white-disabled:disabled{
    color: var(--interactive-text-staticwhite-disabled) !important;
    background-color: var(--interactive-border-staticwhite-disabled) 0;
    border: 1px solid var(--interactive-border-staticwhite-disabled); 
    pointer-events: none;
}

.btn-white-tertiary{
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticbwhite-faded);
    border: 0px solid var(--surface-background-primary-intense);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
}
.btn-white-tertiary:hover{
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-staticwhite-fadedHighlighted);
}
.btn-white-tertiary:focus, .btn-white-tertiary:focus-visible, .btn-white-tertiary:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-staticwhite-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-white-tertiary-disabled, .btn-white-tertiary-disabled:disabled {
    color: var(--interactive-text-staticwhite-disabled) !important;
    background-color: var(--interactive-background-staticwhite-disabled) !important;
    border: 0px solid var(--interactive-border-staticwhite-disabled) !important;
    pointer-events: none;
}
.btn-positive{
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-positive-default);
    border: 0px solid var(--surface-background-primary-intense);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-positive:hover{
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-positive-highlighted);
    border: 0px solid var( --surface-text-primary-normal); 
}
.btn-positive:focus, .btn-positive:focus-visible, .btn-positive:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-positive-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-positive-disabled, .btn-positive-disabled:disabled{
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 0px solid var(--interactive-border-primary-disabled); 
    pointer-events: none;
}

.btn-outline-positive{
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-faded);
    border: 1px solid var(--interactive-border-positive-default);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-outline-positive:hover{
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-fadedHighlighted);
    border: 1px solid var(--interactive-border-positive-default); 
}
.btn-outline-positive:focus, .btn-outline-positive:focus-visible, .btn-outline-positive:active {
    color: var(--interactive-text-positive-normal) !important;
    background-color: var(--interactive-background-positive-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-outline-positive-disabled, .btn-outline-positive-disabled:disabled{
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 1px solid var(--interactive-border-positive-disabled); 
    pointer-events: none;
}

.btn-negative{
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-default);
    border: 0px solid var(--surface-background-primary-intense);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-negative:hover{
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-highlighted);
    border: 0px solid var( --surface-text-primary-normal); 
}
.btn-negative:focus, .btn-negative:focus-visible, .btn-negative:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-negative-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-negative-disabled, .btn-negative-disabled:disabled{
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 0px solid var(--interactive-border-primary-disabled); 
    pointer-events: none;
}

.btn-outline-negative{
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
    border: 1px solid var(--interactive-border-negative-default);    
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-negative:hover{
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-fadedHighlighted);
    border: 1px solid var(--interactive-border-negative-default); 
}
.btn-outline-negative:focus, .btn-outline-negative:focus-visible, .btn-outline-negative:active {
    color: var(--interactive-text-negative-normal) !important;
    background-color: var(--interactive-background-negative-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-outline-negative-disabled, .btn-outline-negative-disabled:disabled{
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 1px solid var(--interactive-border-negative-disabled); 
    pointer-events: none;
}
.btn-outline-positive {
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-faded);
    border: 1px solid var(--interactive-border-positive-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-outline-positive:hover {
    color: var(--interactive-text-positive-normal);
    background-color: var(--interactive-background-positive-fadedHighlighted);
    border: 1px solid var(--interactive-border-positive-default);
}
.btn-outline-positive:focus,
.btn-outline-positive:focus-visible,
.btn-outline-positive:active {
    color: var(--interactive-text-positive-normal) !important;
    background-color: var(--interactive-background-positive-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-positive-disabled,
.btn-outline-positive-disabled:disabled {
    color: var(--interactive-text-positive-disabled) !important;
    background-color: var(--interactive-background-positive-disabled);
    border: 1px solid var(--interactive-border-positive-disabled);
    pointer-events: none;
}
.btn-negative {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-default);
    border: 0px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-negative:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-negative-highlighted);
    border: 0px solid var( --surface-text-primary-normal);
}

.btn-negative:focus,
.btn-negative:focus-visible,
.btn-negative:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-negative-highlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-negative-disabled,
.btn-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-negative {
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
    border: 1px solid var(--interactive-border-negative-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-negative:hover {
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-fadedHighlighted);
    border: 1px solid var(--interactive-border-negative-default);
}
.btn-outline-negative:focus,
.btn-outline-negative:focus-visible,
.btn-outline-negative:active {
    color: var(--interactive-text-negative-normal) !important;
    background-color: var(--interactive-background-negative-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-negative-disabled,
.btn-outline-negative-disabled:disabled {
    color: var(--interactive-text-negative-disabled) !important;
    background-color: var(--interactive-background-negative-disabled);
    border: 1px solid var(--interactive-border-negative-disabled);
    pointer-events: none;
}
.btn-notice {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-notice-default);
    border: 0px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-notice:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-notice-highlighted);
    border: 0px solid var( --surface-text-primary-normal);
}

.btn-notice:focus,
.btn-notice:focus-visible,
.btn-notice:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-notice-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-notice-disabled,
.btn-notice-disabled:disabled {
    color: var(--interactive-text-notice-disabled) !important;
    background-color: var(--interactive-background-notice-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}
.btn-outline-notice {
    color: var(--interactive-text-notice-normal);
    background-color: var(--interactive-background-notice-faded);
    border: 1px solid var(--interactive-border-notice-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-notice:hover {
    color: var(--interactive-text-notice-normal);
    background-color: var(--interactive-background-notice-fadedHighlighted);
    border: 1px solid var(--interactive-border-notice-default);
}
.btn-outline-notice:focus,
.btn-outline-notice:focus-visible,
.btn-outline-notice:active {
    color: var(--interactive-text-notice-normal) !important;
    background-color: var(--interactive-background-notice-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-notice-disabled,
.btn-outline-notice-disabled:disabled {
    color: var(--interactive-text-notice-disabled) !important;
    background-color: var(--interactive-background-notice-disabled);
    border: 1px solid var(--interactive-border-notice-disabled);
    pointer-events: none;
}
.btn-information {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-default);
    border: 0px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-information:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-highlighted);
    border: 0px solid var( --surface-text-primary-normal);
}

.btn-information:focus,
.btn-information:focus-visible,
.btn-information:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-information-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-information-disabled,
.btn-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-information {
    color: var(--interactive-text-information-normal);
    background-color: var(--interactive-background-information-faded);
    border: 1px solid var(--interactive-border-information-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-information:hover {
    color: var(--interactive-text-information-normal);
    background-color: var(--interactive-background-information-fadedHighlighted);
    border: 1px solid var(--interactive-border-information-default);
}

.btn-outline-information:focus,
.btn-outline-information:focus-visible,
.btn-outline-information:active {
    color: var(--interactive-text-information-normal) !important;
    background-color: var(--interactive-background-information-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-information-disabled,
.btn-outline-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 1px solid var(--interactive-border-information-disabled);
    pointer-events: none;
}
.btn-information {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-default);
    border: 0px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-information:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-information-highlighted);
    border: 0px solid var( --surface-text-primary-normal);
}
.btn-information:focus,
.btn-information:focus-visible,
.btn-information:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-information-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-information-disabled,
.btn-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-information {
    color: var(--interactive-text-information-normal);
    background-color: var(--interactive-background-information-faded);
    border: 1px solid var(--interactive-border-information-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-outline-information:hover {
    color: var(--interactive-text-informat\\\\ion-normal);
    background-color: var(--interactive-background-information-fadedHighlighted);
    border: 1px solid var(--interactive-border-information-default);
}

.btn-outline-information:focus,
.btn-outline-information:focus-visible,
.btn-outline-information:active {
    color: var(--interactive-text-information-normal) !important;
    background-color: var(--interactive-background-information-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-outline-information-disabled,
.btn-outline-information-disabled:disabled {
    color: var(--interactive-text-information-disabled) !important;
    background-color: var(--interactive-background-information-disabled);
    border: 1px solid var(--interactive-border-information-disabled);
    pointer-events: none;
}

.btn-neutral {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-neutral-default);
    border: 0px solid var(--surface-background-primary-intense);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}

.btn-neutral:hover {
    color: var(--interactive-text-staticwhite-normal);
    background-color: var(--interactive-background-neutral-highlighted);
    border: 0px solid var( --surface-text-primary-normal);
}

.btn-neutral:focus,
.btn-neutral:focus-visible,
.btn-neutral:active {
    color: var(--interactive-text-staticwhite-normal) !important;
    background-color: var(--interactive-background-neutral-default) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}

.btn-neutral-disabled,
.btn-neutral-disabled:disabled {
    color: var(--interactive-text-neutral-disabled) !important;
    background-color: var(--interactive-background-neutral-disabled);
    border: 0px solid var(--interactive-border-primary-disabled);
    pointer-events: none;
}

.btn-outline-neutral {
    color: var(--interactive-text-neutral-normal);
    background-color: var(--interactive-background-neutral-faded);
    border: 1px solid var(--interactive-border-neutral-default);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-20);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    padding: var(--spacing-0) var(--spacing-6);
    text-align: center;
    border-radius: var(--bradius-medium);
    min-height: var(--size-36);
    flex: 1 0 0;
}
.btn-outline-neutral:hover {
    color: var(--interactive-text-neutral-normal);
    background-color: var(--interactive-background-neutral-fadedHighlighted);
    border: 1px solid var(--interactive-border-neutral-default);
}
.btn-outline-neutral:focus,
.btn-outline-neutral:focus-visible,
.btn-outline-neutral:active {
    color: var(--interactive-text-neutral-normal) !important;
    background-color: var(--interactive-background-neutral-fadedHighlighted) !important;
    border-color: var(--interactive-background-primary-default) !important;
    outline: 2 !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-outline-neutral-disabled,
.btn-outline-neutral-disabled:disabled {
    color: var(--interactive-text-neutral-disabled) !important;
    background-color: var(--interactive-background-neutral-disabled);
    border: 1px solid var(--interactive-border-neutral-disabled);
    pointer-events: none;
}
.btn-link{
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    border: 0px solid var(--surface-background-primary-intense);    
    font-size: var(--fz-size-10);
    line-height: var(--lineheight-16);
    font-family: var(--typography-typefaces-body);
    font-weight: var(--fw-600);
    text-align: center;
    padding: var(--spacing-0) !important;
    text-decoration: none;
    min-height: var(--size-00) !important;
}
.btn-link:hover{
    color: var(--interactive-text-primary-subtle);
    background-color: var(--transperent);
    border: 0px solid var(--interactive-border-negative-default); 
    text-decoration: underline;
}
.btn-link:focus, .btn-link:focus-visible, .btn-link:active {
    color: var(--interactive-text-primary-subtle) !important;
    background-color: var(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding:var(--spacing-0) var(--spacing-0) !important;
    outline: 2 !important;
    min-height: auto !important;
    box-shadow: none !important;
    border-radius: var(--bradius-small);
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-icon-12 {
    border: 0px solid var(--interactive-border-negative-default);
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    text-align: center;
    border-radius: var(--bradius-small);
    line-height: var(--size-00);
    padding: var(--size-00) var(--size-00);
    
}
.btn-icon-12 i {    
    font-size: var(--fz-size-12) !important;    
}
.btn-icon-16{
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    text-align: center;
    border-radius: var(--bradius-small);
    line-height: var(--size-00);
    padding: var(--size-00) var(--size-00);
    border: 0px solid var(--interactive-border-negative-default);
    
}
.btn-icon-16 i {
    font-size: var(--fz-size-16) ;   
}
.btn-icon-20{
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    text-align: center;
    border-radius: var(--bradius-small);
    line-height: var(--size-00);
    padding: var(--size-00) var(--size-00);
    border: 0px solid var(--interactive-border-negative-default);
}
.btn-icon-20 i{
    font-size: var(--fz-size-20);
}
.btn-icon-24 { 
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    text-align: center;
    border-radius: var(--bradius-small);
    line-height: var(--size-00);
    padding: var(--size-00) var(--size-00);
    border: 0px solid var(--interactive-border-negative-default);
    
}
.btn-icon-24 i{     
    font-size: var(--fz-size-24) ;    
}
.btn-icon-44 { 
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    text-align: center;
    border-radius: var(--bradius-small);
    line-height: var(--size-00);
    padding: var(--spacing-3) var(--spacing-3);
    border: 0px solid var(--interactive-border-negative-default);
    
}
.btn-icon-44 i { 
    font-size: var(--size-28) ; 
}

.btn-icon-12 i:hover, .btn-icon-14 i:hover, .btn-icon-16 i:hover, .btn-icon-20 i:hover, .btn-icon-24 i:hover, .btn-icon-44 i:hover{
    color: var(--interactive-text-primary-subtle);
    background-color: var(--transperent);
}

.btn-icon-12:focus, .btn-icon-12:focus-visible, .btn-icon-12:active, .btn-icon-16:focus, .btn-icon-16:focus-visible, .btn-icon-16:active, .btn-icon-20:focus, .btn-icon-20:focus-visible, .btn-icon-20:active, .btn-icon-24:focus, .btn-icon-24:focus-visible, .btn-icon-24:active {
    color: var(--interactive-text-primary-subtle) !important;
    background-color: var(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding:var(--spacing-0) var(--spacing-0) !important;
    outline: 2 !important;
    min-height: auto !important;
    box-shadow: none !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-icon-44:focus, .btn-icon-44:focus-visible, .btn-icon-44:active{
    color: var(--interactive-text-primary-subtle) !important;
    background-color: var(--transperent) !important;
    border-color: var(--interactive-background-primary-default) !important;
    padding: var(--spacing-3) var(--spacing-3);
    outline: 2 !important;
    outline: 2px solid var(--interactive-background-primary-default) !important;
}
.btn-primary-ic{
    color: var(--interactive-text-onprimary-normal);
    background-color: var(--interactive-background-primary-default);
    border-radius: var(--bradius-medium);
    border: 0px solid var(--surface-background-primary-intense);
    padding: var(--size-04) var(--size-08);
}

.btn-primary-ic:hover{
    color: var(--interactive-text-onprimary-normal);
    background-color: var( --interactive-background-primary-highlighted);
}
.btn-primary-outline-ic{
    color: var(--surface-background-primary-intense);
    background-color: var(--surface-background-primary-intense) 0;
    border: 1px solid var(--surface-background-primary-intense); 
    border-radius: var(--bradius-medium);
    padding: var(--size-04) var(--size-08);
}

.btn-primary-outline-ic:hover{
    color: var(--interactive-text-primary-normal);
    background-color: var(--interactive-background-primary-faded);
    border: 1px solid var(--interactive-background-primary-default);  
}
.btn-tertiary-ic{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
    border: 0px solid var(--surface-background-primary-intense);
    padding: var(--size-04) var(--size-08);
}
.btn-tertiary-ic:hover{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-text-gray-disabled);
}
.btn-ic-xsm{
    font-size: var(--fz-size-12);
}
.btn-ic-sm{
    font-size: var(--fz-size-12);
}
.btn-ic-md{
    font-size: var(--fz-size-14);
}
.btn-ic-lg{
    font-size: var(--fz-size-16);
}
.btn-ic-2lg{
    font-size: var(--fz-size-20);
}
.btn-ic-xlg{
    font-size: var(--fz-size-24);
}
.btn-ic-xxlg{
    font-size: var(--fz-size-44);
}
.btn-xsm{
    font-size: var(--fz-size-12);
    padding: var(--spacing-2) var(--spacing-3);
    line-height: var(--lineheight-18);
    min-height: var(--size-28);
}
.btn-sm{
    font-size: var(--fz-size-12);
    padding: var(--spacing-2) var(--spacing-4);
    line-height: var(--lineheight-18);
    min-height: var(--size-32);
}
.btn-md{
    font-size: var(--fz-size-14);
    padding: var(--spacing-2) var(--spacing-6);
    line-height: var(--lineheight-20);
    min-height: var(--size-36);
}
.btn-lg{
    font-size: var(--fz-size-16);
    padding: var(--spacing-2) var(--spacing-6);
    line-height: var(--lineheight-24);
    min-height: var(--size-48);
}

/* Sidenav-css start */

#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidenav-container {
    background-color: var(--surface-background-gray-moderate);
    padding: var(--ps-10);
}
#sidenav-container ul.list-group{
    margin: 0 0px;
}
/* sidenav sizes when expanded and expanded */
.sidenav-expanded {
    max-width: 270px;
}

.sidenav-collapsed {
    width: 64px;
}
.sidenav-collapsed ul li a {
    text-align: center;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}
.sidenav-collapsed ul li {
    margin-bottom: var(--size-04);
}
.sidenav-collapsed ul li a i {
    text-align: center;
    padding-left: 0px !important;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}
#sidenav-container .list-group a {
    min-height: 44px;
    color: var(--interactive-text-gray-normal);
    border-radius: var(--bradius-medium);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
    vertical-align: middle;
    padding: var(--spacing-3) var(--spacing-3);  
    
}

#sidenav-container .list-group a.Heading {
    min-height: 44px;
    padding: var(--ps-12);
    
}
#sidenav-container .list-group a i{
    font-size: var(--fz-size-20);
    padding-left: 4px;
    color: var(--interactive-icon-gray-muted);   
}

/* Submenu item*/
.typo1 {
    position: relative;
  }
  .display-actionlist .list-group-item i {
    color: var(--surface-icon-gray-normal) !important;
  }

.typo1::after{
    content: " ";
    height: 0px;
    width: 88%;
    position: absolute;
    left: 0;
    background: var(--surface-border-gray-muted);
    align-items: center;
    justify-content: center; 
    margin: 0px 15px;
  }
#sidenav-container .list-group .sidenav-submenu a:before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
    z-index: 99;

}
#sidenav-container .list-group .sidenav-submenu a {
    border: var(--bradius-none);
    padding-left: 20px;
}

.sidenav-expanded ul.list-group li [aria-expanded="false"]::after {
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e844';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 26%;
    color: var(--surface-icon-gray-normal);
}
.sidenav-expanded ul.list-group li [aria-expanded="true"]::after {
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e845';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 26%;
    color: var(--surface-icon-gray-normal);
}
ul.list-group li ul li a[aria-expanded="true"] {
    background-color: var(--transperent);
    color: var(--interactive-text-primary-normal) !important;
}
ul.list-group li ul li a[aria-expanded="true"] span {
    background-color: var(--transperent);
    color: var(--interactive-text-primary-normal) !important;
}

ul.list-group li ul li a[aria-expanded="true"]::before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    border: var(--bwidth-thin) solid var(--interactive-border-primary-default);
    z-index: 99;
    left: 0;
    top: 0;
}
.sidenav-expanded ul li{
    margin-bottom: var(--spacing-2);
}
.sidenav-expanded ul li ul li{
    margin-bottom: var(--spacing-0);
}

ul.sidebar-submenu li:hover:before{
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}
ul.sidebar-submenu li a:hover:before{
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    border: var(--bwidth-thin) solid var(--normal);
    z-index: 99;
    top: 0;
    left: 0;
}
ul.sidebar-submenu li a:hover::after{
    border: var(--bwidth-thin) solid var(--normal);
}

ul.sidebar-submenu .secondlevel ul li:hover:before {
    border: var(--bwidth-thin) solid var(--surface-border-gray-muted);
}
ul.sidebar-submenu .secondlevel ul li ul li:hover:before{
    border: var(--bwidth-thin) solid var(--normal);
}

.sidenav-submenu {
    font-size: var(--fz-size-14);
}

/* Closed submenu icon */
#sidenav-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f105";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Opened submenu icon */
#sidenav-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f107";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}

.list-group .list-group-item:first-child {
    border-top-left-radius: var(--bradius-none);
    border-top-right-radius: var(--bradius-none);
}

.list-group .sidenav-menu-collapsed {
    color: var(--interactive-text-gray-normal);
    border-radius: var(--bradius-medium);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    margin-left: var(--size-08);
}
.list-group-item i{
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}
.list-group .list-group-item {
    border: var(--bradius-none);
}
.list-group .sidenav-menu-collapsed.head {
    text-transform: uppercase;
    color: var(--surface-text-gray-muted);
    letter-spacing: var(--spacing-1);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-20);
    margin-left: var(--spacing-0);
}
.footer_logo_sidenav {
    display: block;
    text-align: center;
    position: sticky;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: var(--surface-background-gray-moderate);
    color: var(--ds-input-border);
    z-index: 9999;
}

.footer_logo_sidenav img{ width: inherit;;}

.sidenav-expanded ul li a:hover {
    background-color: var(--transperent) !important;
    font-weight: var(--fw-600) !important;
}
.sidenav-expanded ul li a span:hover {
    font-weight: var(--fw-600) !important;
}
.list-group .icon_color {
    color: var(--interactive-icon-neutral-muted);
    font-size: var(--fz-size-20);
    border: var(--bwidth-thin) solid var(--normal);
} 
.list-group .sidenav-menu-collapsed.head:hover{
    font-weight: var(--fw-700) !important;
}
.sidenav-expanded .nav_expand {
    justify-content:space-between;
}

.sidenav-collapsed .nav_expand {
    justify-content:center;
}
#sidenav-container {
        box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
}


/* Button show code css */

.showcode-bg{
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    margin-top: var(--spacing-4);
    padding: var(--spacing-7);
    background-color: var(--surface-background-dark-subtle) ;
    color: var(--interactive-text-onprimary-normal);
    vertical-align: middle;
    border-radius: 0 0 var(--bradius-medium) var(--bradius-medium) ;
}
pre code {
    white-space: pre;
    tab-size: 4;
}
.code-group{
    text-align: right;
    margin-bottom: -4%;
}
.btn-forcode{
    background-color: var(--interactive-background-staticbwhite-faded);
    padding: var(--spacing-0) var(--spacing-3);
    border-radius: var(--bradius-medium);
    min-height: var(--size-28);
    font-size: var(--fz-size-12);
    color: var(--interactive-text-staticwhite-normal);
    border: 0;
}
.btn-forcode:hover{
    background-color: var(--interactive-background-staticwhite-fadedHighlighted) !important;    
    color: var(--interactive-text-staticwhite-normal);
    border: 0;
}
.showcode .accordion-button {
    padding: 0;
    
    
}
.card .card-header .showcode button {
    background: transparent;
    color: var(--surafec-text-gray-normal);
}
.accordion-item.showcode  {
    border-bottom: none;
}

/* Alert css */

.alert {
    padding: var(--spacing-4) var(--spacing-4);
    align-items: flex-start;
}

.alert .alert-card {
    display: flex;
    align-items: baseline;
    /* justify-content: space-between; */
    /* justify-content: space-between; */
}

.alert strong {
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100);
}
.alert i {
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
}
.icon-x{
    margin-right: var(--spacing-0) !important;
}

.alert .btn-icon-16 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--spacing-5) var(--spacing-4);
}

.alert .btn-icon-16:active,
.btn-icon-16:focus,
.btn-icon-16:focus-visible {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--spacing-5) var(--spacing-4) !important;
}

.alert-container p{
    color: var(--surface-text-gray-subtle);
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-12);
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-75);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    margin-right: var(--spacing-2);
}
.f-width-container{
    display: flex;
    align-items: center;
}

.f-width-container p{
    margin-right: var(--spacing-8);
    margin-bottom: var(--spacing-0);
}
.f-width-container .internal-buttons{
    display: flex;
    align-items: center;
    margin-right: 16px;
}
.w-lg-49{
    width: 49% !important;
}
.alert-positive{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-positive-subtle);
    background: var(--feedback-background-positive-subtle);
    color: var(--feedback-text-positive-intense);
}
.alert-positive p{    
    color: var(--feedback-text-positive-intense);
}
.alert-positive i{
    color: var(--feedback-icon-positive-intense);    
}
.alert-negative{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-negative-subtle);
    background: var(--feedback-background-negative-subtle);
    color: var(--feedback-text-negative-intense);
}
.alert-negative p{    
    color: var(--feedback-text-negative-intense);
}
.negative {
    color: var(--feedback-text-negative-intense) !important;

}
.alert-negative i{
    color: var(--feedback-icon-negative-intense);    
}

.alert-notice{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-notice-subtle);
    background: var(--feedback-background-notice-subtle);
    color: var(--feedback-text-notice-intense);
}
.alert-notice p{
    color: var(--feedback-text-notice-intense);
}
.notice {
    color: var(--feedback-text-notice-intense) !important;

}
.alert-notice i{
    color:var(--interactive-text-notice-intense);    
}
.alert-information{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-information-subtle);
    background: var(--feedback-background-information-subtle);
    color: var(--feedback-text-information-intense);
}
.alert-information p{
    color: var(--feedback-text-information-intense);
}
.information {
    color: var(--feedback-text-information-intense) !important;

}
.alert-information i{
    color: var(--feedback-icon-information-intense);    
}

.alert-neutral{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-neutral-subtle);
    background: var(--feedback-background-neutral-subtle);
    color: var(--feedback-text-neutral-intense);
}
.alert-neutral p{
    color: var(--feedback-text-neutral-intense);
}
.neutral {
    color: var(--feedback-text-neutral-intense) !important;

}
.alert-neutral i{
    color: var(--feedback-icon-neutral-intense);    
}
.alert-positive-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-positive-intense);
    background: var(--feedback-background-positive-intense);
    color: var(--surface-text-staticwhite-normal);
}
.alert-positive-intense p{
    color: var(--surface-text-staticwhite-subtle);
}
.alert-positive-intense i{
    color: var(--surface-icon-staticwhite-normal);
}

.alert-negative-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-negative-intense);
    background: var(--feedback-background-negative-intense);
    color: var(--surface-text-staticwhite-normal);
}
.alert-negative-intense p{
    color: var(--surface-text-staticwhite-subtle);
}
.negative-intense {
    color: var(--surface-text-staticwhite-normal);

}
.alert-negative-intense i{
    color: var(--surface-icon-staticwhite-normal); 
}

.alert-notice-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-notice-intense);
    background: var(--feedback-background-notice-intense);
    color: var(--surface-text-staticwhite-normal);
}
.notice-intense {
    color: var(--surface-text-staticwhite-normal);

}
.alert-notice-intense i{
    color: var(--surface-text-staticwhite-normal);   
}

.alert-information-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-information-intense);
    background: var(--feedback-background-information-intense);
    color: var(--surface-text-staticwhite-normal);
}
.information-intense {
    color: var(--surface-text-staticwhite-normal);

}
.alert-information-intense i{
    color: var(--surface-text-staticwhite-normal);   
}

.alert-neutral-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-neutral-intense);
    background: var(--feedback-background-neutral-intense);
    color: var(--surface-text-staticwhite-normal);
}

.neutral-intense {
    color: var(--surface-text-staticwhite-normal);

}
.alert-neutral-intense i{
    color: var(--surface-text-staticwhite-normal);    
}
.alert-container-intense p{
    color: var(--surface-text-staticwhite-normal);
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-12);
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-75);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    margin-right: var(--spacing-2);
}
.badge{
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-16);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--surface-background-primary-subtle);
    border-radius: var(--bradius-max);
    color: var(--feedback-text-positive-intense);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    min-height: 16px;
}
.badge i {
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    margin-right: var(--spacing-1);
}
.badge-md{
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--surface-background-primary-subtle);
    border-radius: var(--bradius-max);
    color: var(--feedback-text-positive-intense);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}
.badge-md i{
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    margin-right: var(--spacing-1);
}
.badge-lg{
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--surface-background-primary-subtle);
    border-radius: var(--bradius-max);
    color: var(--feedback-text-positive-intense);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}
.badge-lg i{
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    margin-right: var(--spacing-1);
}
.bg-subtle-positive{
    background-color: var(--feedback-background-positive-subtle);
    color: var(--feedback-text-positive-intense);
}
.bg-intense-positive{
    background-color: var(--feedback-background-positive-intense);
    color: var(--surface-text-staticwhite-normal);
}
.bg-subtle-negative{
    background-color: var(--feedback-background-negative-subtle);
    color: var(--feedback-text-negative-intense);
}
.bg-intense-negative{
    background-color: var(--feedback-background-negative-intense);
    color: var(--surface-text-staticwhite-normal);
}
.bg-subtle-notice{
    background-color: var(--feedback-background-notice-subtle);
    color: var(--feedback-text-notice-intense);
}
.bg-intense-notice{
    background-color: var(--feedback-background-notice-intense);
    color: var(--surface-text-staticwhite-normal);
}
.bg-subtle-information{
    background-color: var(--feedback-background-information-subtle);
    color: var(--feedback-text-information-intense);
}
.bg-intense-information{
    background-color: var(--feedback-background-information-intense);
    color: var(--surface-text-staticwhite-normal);
}
.bg-subtle-neutral{
    background-color: var(--feedback-background-neutral-subtle);
    color: var(--feedback-text-neutral-intense);
}
.bg-intense-neutral{
    background-color: var(--feedback-background-neutral-intense);
    color: var(--surface-text-staticwhite-normal);
}
.bg-subtle-primary{
    background-color: var(--surface-background-primary-subtle) !important;
    color: var(--surface-text-primary-normal) !important;
}
.bg-intense-primary{
    background-color: var(--surface-background-primary-intense);
    color: var(--surface-text-primary-subtle) !important;
}
/* Dropdown Menu - Css */

/* Dropdown Menu - Css */

.dropdown-menu {
    min-width: 360px;
    padding: var(--spacing-2) var(--spacing-3);
    margin: 0;
    border-radius: var(--bradius-medium);
    border: 1px solid var(--popup-border-subtle);
    box-shadow: 0px 8px 24px var(--elevation-midraised);
    background-color: var(--popup-background-subtle);
}
.dropdown-item:active, .dropdown-item:hover {
    text-decoration: none;
    
    color: var(--bs-list-group-action-active-color);
    background-color: var(--bs-list-group-action-active-bg);
}

.custome-dropdowm  .menu-title{
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    color: var(--interactive-text-gray-muted);
}
.dropdown-title{
    font-size: var(--fz-size-16);
    font-weight: var(--fw-700);
}
.header-divider{
    padding-left: 0;
    padding-right: 0;
    margin-left: -16px !important;
    margin-right: -16px !important;
}
.custome-dropdowm li i{
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
    vertical-align: middle;
    color: var(--interactive-icon-gray-subtle);
 }
 .custome-padding{
    padding: var(--spacing-2);
 }

 .custome-dropdowm .dropdown-item {
    padding: var(--spacing-3) var(--spacing-3);
    font-size: var(--fz-size-14);
    font-weight: 400;
    color: var(--interactive-text-gray-normal);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.custome-dropdowm li .show-leading::after{
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e8cd';
    font-family: "feather";
    position: absolute;
    right: 6%;
    color: var(--interactive-icon-gray-muted);
    vertical-align: middle;
 }

.custome-dropdowm li a:hover, a:active{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}

.custome-dropdowm li .hover{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}
.custome-dropdowm li a:focus, a:focus-visible{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
}


.custome-dropdowm li.active a{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-faded);
}
.custome-dropdowm li.active:hover a{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-fadedHighlighted);
}

.custome-dropdowm li a.focus{
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-radius: var(--bradius-medium);

}
.custome-dropdowm li a.disabled{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-disabled);
    background-color: var(--transperent);
}
.custome-dropdowm li a.destructive{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--transperent);
}
.custome-dropdowm li a.destructive:hover{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}
.custome-dropdowm li a.destructive-hover{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}

.custome-dropdowm li a.destructive i{   
    color: var(--interactive-icon-negative-normal);
}

.custome-dropdowm li a.destructive-hover i{
    color: var(--interactive-icon-negative-normal);
}

.search-container {
    padding: var(--spacing-5);
    text-align: center;
}
.search-container div {
    margin-bottom: var(--spacing-5);
    }
.search-container div i{
    font-size: var(--fz-size-24);    
}
.search-container .title-container{
    line-height: var(--spacing-3);
}
.search-container .search-title{
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-2);
}
.search-container .search-subtitle{
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-3);
}

.search-link {
    color: var(--interactive-text-primary-normal);
    text-decoration: none;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-3);
}
.search-link:hover {
    text-decoration: underline;
    background-color: transparent !important;
    cursor: pointer;
}

/* Spinner css */

.spinner-border {
    width: var(--size-24);
    height: var(--size-24);;
    /* --bs-spinner-vertical-align: -0.125em; */
    /* --bs-spinner-border-width: 0.25em; */
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-border;
    border: 0px solid currentcolor;
    border-right-color: transparent;
}

.spinner-medium {
    width: var(--size-16) !important;
    height: var(--size-16) !important;
    font-size: var(--fz-size-16);
}
.spinner-large {
    width: var(--size-20) !important;
    height: var(--size-20);
    font-size: var(--fz-size-20);
}
.spinner-xlarge {
    width: var(--size-24) !important;
    height: var(--size-24) !important;
    font-size: var(--fz-size-24);
}
.spinner-xxlarge {
    width: var(--size-48) !important;
    height: var(--size-48) !important;
    font-size: var(--size-48);
}
.spinner-label-bootom {
    color: var(--surface-text-gray-muted);
    font-size: var(--fz-size-12);
    display: block;
    margin-top: var(--spacing-3);
    font-weight: 400;
}
.spinner-label {
    color: var(--surface-text-gray-muted);
    font-size: var(--fz-size-12);
    margin: var(--spacing-0) var(--spacing-3);
    font-weight: var(--fw-400);
}

/* Counter css */

.counter{
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-16);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--bradius-max);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    min-height: 16px;
}
.counter-md{
    font-size: var(--fz-size-10);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--bradius-max);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}
.counter-lg{
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--bradius-max);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}



/* collapse-Css */

.collapse-link[aria-expanded="false"]::after{
    flex-shrink: 0;
    margin-left: auto;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-icon-primary-subtle);
    
}
.collapse-link[aria-expanded="true"]::after{
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--interactive-text-primary-subtle);
    font-family: 'feather' !important;
    background-image: none !important;
    /* transform: rotate(-180deg); */
}
button.collapse-link[aria-expanded="false"]::after{
    flex-shrink: 0;
    margin-left: auto;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-text-onprimary-normal);
    
}
button.collapse-link[aria-expanded="true"]::after{
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    color: var(--interactive-text-onprimary-normal);
    font-family: 'feather' !important;
    background-image: none !important;
    /* transform: rotate(-180deg); */
}

display-actionlist ul.list-group li [aria-expanded="false"]::after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e844';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 23%;
    color: var(--surface-icon-gray-normal);
}
.display-actionlist ul.list-group li [aria-expanded="true"]::after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e845';
    font-family: "feather";
    position: absolute;
    right: 6%;
    top: 23%;
    color: var(--surface-icon-gray-normal);
}

.display-actionlist .sidenav-menu-collapsed{
    vertical-align: middle;
}

.display-actionlist .list-group-item i {
    vertical-align: middle;
}

/* Chip-Css */


.chip-default {
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);
}
.chip-default:hover {
    border: 1px solid var(--interactive-border-gray-faded);    
    background-color: var(--interactive-background-gray-faded);
}
.chip-default.active{   
    border: 1.5px solid var(--interactive-border-primary-default) !important;
    background: var(--interactive-background-primary-faded) !important;
    color: var(--interactive-text-primary-normal);
}
.chip-default:focus-visible {   
    border: 1px solid var(--interactive-border-gray-faded);    
    background-color: var(--interactive-background-gray-faded);
    color: var(--interactive-text-gray-subtle);
}
.chip-default-negative {
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    color: var(--interactive-text-gray-subtle);
    background-color: var(--surface-background-gray-intense);
}
.chip-default-negative:hover {
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);
}
.chip-default-negative:focus-visible {   
    border: 1px solid var(--interactive-border-gray-faded);    
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);
}
.chip-default-negative.active{   
    border: 1.5px solid var(--interactive-border-negative-default) !important;
    background: var(--interactive-background-negative-faded) !important;
    color: var(--interactive-text-negative-normal) !important;
}
.chip-default-positive {
    border-radius: var(--bradius-max);
    border: 1px solid var(--interactive-border-gray-faded);
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);
}
.chip-default-positive:hover {
    border: 1px solid var(--interactive-border-gray-faded);    
    background-color: var(--interactive-background-gray-faded);
}
.chip-default-positive:focus-visible {   
    border: 1px solid var(--interactive-border-gray-faded);    
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);
}
.chip-default-positive.active{   
    border: 1.5px solid var(--interactive-border-positive-default) !important;
    background: var(--interactive-background-positive-faded) !important;
    color: var(--interactive-text-positive-normal) !important;
}

.btn.chip-default-positive, .btn.chip-default-positive:active {
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);

}
.btn.chip-default-negative, .btn.chip-default-negative:active {
    background-color: var(--surface-background-gray-intense);
    color: var(--interactive-text-gray-subtle);

}
.chip-xsm{
    padding: var(--spacing-1) var(--spacing-4);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-12);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-18);
}
.chip-xsm i{
   
    font-size: var(--fz-size-12);
}
.chip-sm{
    padding: var(--spacing-1) var(--spacing-4);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
}
.chip-sm i{
    font-size: var(--fz-size-14);
}
.chip-md{
    padding: var(--spacing-2) var(--spacing-6);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-16);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-24);
}
.chip-md i{
    font-size: var(--fz-size-16);
}
.chip-lg{
    padding: var(--spacing-3) var(--spacing-7);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-20);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-26);
}
.chip-lg i{
    font-size: var(--fz-size-20);
}

.chip-help-text{
    color: var(--surface-text-gray-muted);
font-size: var(--fz-size-11);
font-style: italic;
font-weight: var(--fw-400);
line-height: var(--lineheight-16);
}

/* Toast css */

.toast {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--bradius-medium);    
}
.toast .toast-card {
    display: flex;
    align-items: baseline
}
.toast strong {
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100);
}
.toast i {
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
}
.icon-x{
    margin-right: var(--spacing-0) !important;
}

.toast-container p{
    color: var(--surface-text-gray-subtle);
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-12);
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-75);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    margin-right: var(--spacing-2);
}
.f-width-container{
    display: flex;
    align-items: center;
}

.f-width-container p{
    margin-right: var(--spacing-8);
    margin-bottom: var(--spacing-0);
}
.f-width-container .internal-buttons{
    display: flex;
    align-items: center;
    margin-right: 16px;
}
.w-lg-49{
    width: 49% !important;
}
.toast-positive{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-positive-subtle);
    background: var(--feedback-background-positive-subtle);
}
.toast-positive i{
    color: var(--feedback-icon-positive-intense);
}
.toast-negative{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-negative-subtle);
    background: var(--feedback-background-negative-subtle);
}
.negative {
    color: var(--interactive-text-negative-normal) !important;

}
.toast-negative i{
    color: var(--feedback-icon-negative-intense);    
}

.toast-notice{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-notice-subtle);
    background: var(--feedback-background-notice-subtle);
}
.notice {
    color: var(--interactive-text-notice-normal) !important;

}
.toast-notice i{
    color:var(--interactive-text-notice-normal);    
}
.toast-information{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-information-subtle);
    background: var(--feedback-background-information-subtle);

}
.information {
    color: var(--interactive-text-information-normal) !important;

}
.toast-information i{
    color: var(--feedback-icon-information-intense);    
}

.toast-neutral{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--feedback-border-neutral-subtle);
    background: var(--feedback-background-neutral-subtle);

}
.neutral {
    color: var(--interactive-text-neutral-normal) !important;

}
.toast-neutral i{
    color: var(--feedback-icon-neutral-intense);    
}
.toast-positive-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-positive-intense);
    background: var(--feedback-background-positive-intense);
    color: var(--surface-text-staticwhite-normal);
}
.toast-positive-intense i{
    color: var(--surface-text-staticwhite-normal);
}

.toast-negative-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-negative-intense);
    background: var(--feedback-background-negative-intense);
    color: var(--surface-text-staticwhite-normal);
}
.negative-intense {
    color: var(--surface-text-staticwhite-normal);

}
.toast-negative-intense i{
    color: var(--surface-text-staticwhite-normal); 
}

.toast-notice-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-notice-intense);
    background: var(--feedback-background-notice-intense);
    color: var(--surface-text-staticwhite-normal);
}
.notice-intense {
    color: var(--surface-text-staticwhite-normal);

}
.toast-notice-intense i{
    color: var(--surface-text-staticwhite-normal);   
}

.toast-information-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-information-intense);
    background: var(--feedback-background-information-intense);
    color: var(--surface-text-staticwhite-normal);
}
.information-intense {
    color: var(--surface-text-staticwhite-normal);

}
.toast-information-intense i{
    color: var(--surface-text-staticwhite-normal);   
}

.toast-neutral-intense{
    border-radius: var(--bradius-medium);
    border: 0px solid var(--feedback-border-neutral-intense);
    background: var(--feedback-background-neutral-intense);
    color: var(--surface-text-staticwhite-normal);
}

.neutral-intense {
    color: var(--surface-text-staticwhite-normal);

}
.toast-neutral-intense i{
    color: var(--surface-text-staticwhite-normal);    
}
.toast-container-intense p{
    color: var(--surface-text-staticwhite-normal);
    font-family: var(--Typography-Typefaces-Body);
    font-size: var(--fz-size-12);
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-75);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    margin-right: var(--spacing-2);
}

.tost-container{
    display: flex;
    align-items: center;
}
.tost-container-promotional{
    display: flex;
}

.toast-promotional{
    border-radius: var(--bradius-medium);
    border: 1px solid var(--surface-border-gray-muted) !important;
    background: var(--surface-background-gray-intense);

}
.toast .btn-icon-16:active, .btn-icon-16:focus, .btn-icon-16:focus-visible{
    position: unset;
    padding: var(--spacing-0) var(--spacing-0) !important;
    outline: 2px solid var(--surface-background-primary-intense) !important;
    display: flex;
    align-items: center;
}
.toast .btn-icon-16 i:hover{
    color: var(--surface-text-staticwhite-subtle);
}


.btn-close {
    color: var(--surface-text-staticwhite-normal) !important;
}
.btn-close:focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
    box-shadow: none;
    opacity: 1;
    color: var(--surface-text-staticwhite-normal) !important;
}

.toast-promotional .btn-icon-16 i:hover{
    color: var(--surface-text-staticblack-subtle);
}

.tost-container-promotional i {
    margin-top: var(--size-02);
}
/* Tags-css */

.tag {
    border-radius: var(--bradius-max);
    border: 0px solid var(--interactive-border-gray-faded);
    color: var(--surafec-text-gray-subtle);
    background-color: var(--interactive-background-gray-faded);
}
.tag button{
    border-radius: none;
    border: none;
    color: var(--interactive-icon-gray-muted);
    background: none;
    padding: 0px;
    margin-left: var(--spacing-1);
    vertical-align: middle;
}
.tag button:focus{
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-radius: var(--bradius-medium);
    padding: 0;
}
.tag-md{
    padding: var(--spacing-1) var(--spacing-3);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
}
.tag-md i{
    font-size: var(--fz-size-14);
}
.tag-lg{
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--typography-typefaces-body);
    font-size: var(--fz-size-16);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-24);
}
.tag-lg i{
    font-size: var(--fz-size-16);
}
.tag-group span{
    display: inline-block;
    margin-bottom: var(--spacing-2) !important ;
}

/* Bottom Sheet - Css */

.offcanvas.offcanvas-bottom {
    right: 0;
    left: 0;
    height: 45vh;
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--popup-border-subtle);
    transform: translateY(100%);
    z-index: 9999;
    background-color: var(--popup-background-subtle);
}

.offcanvas.offcanvas-lg {    
    height: 65vh;
}

.offcanvas {
    padding-top: 4px;
    border-radius: 16px 16px 0 0;
}
.offercanvas-top-header{
    display: flex;
    padding: 0px 24px 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.offercanvas-top-header .handle{
    width: 56px;
    height: 4px;
    background: var(--interactive-icon-gray-muted);
    border-radius: 16px;
}

.offcanvas-header {
    display: block;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--surface-border-gray-muted);
}
.offcanvas-header .header-align{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.offcanvas-header .header-align i{
    color: var(--surface-icon-gray-normal);
}
.offcanvas-footer {    
    align-items: center;
    padding: var(--spacing-4) var(--spacing-4);
    border-top: 1px solid var(--surface-border-gray-muted);
    background-color: transparent;
}
.offcanvas-body {
    flex-grow: 1;
    padding: var(--spacing-2) var(--spacing-3);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.offcanvas-body .dropdown-menu {
    display: inline-block;
    width: 100%;
    padding: var(--spacing-0) var(--spacing-0);
    margin: 0;
    border-radius: var(--bradius-medium);
    border: 0px solid var(--popup-background-subtle);
    box-shadow: none;
    background-color: transparent;
}
.offcanvas-body .dropdown-item:active, .dropdown-item:hover {
    text-decoration: none;    
    color: var(--surface-text-gray-normal);
    background-color: var(--bs-list-group-action-active-bg);
}

.btn.show > .dropdown-toggle:after{
    color: var(--interactive-text-onprimary-normal);
}

.offcanvas-body .custome-dropdowm  .menu-title{
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
    color: var(--interactive-text-gray-muted);
}
.offcanvas-body .offcanvas-body .dropdown-title{
    font-size: var(--fz-size-16);
    font-weight: var(--fw-700);
}
.offcanvas-body .header-divider{
    padding-left: 0;
    padding-right: 0;
    margin-left: -16px !important;
    margin-right: -16px !important;
}
.offcanvas-body .custome-dropdowm li i{
    font-size: var(--fz-size-16);
    margin-right: var(--spacing-3);
    vertical-align: middle;
 }
 .custome-padding{
    padding: var(--spacing-2);
 }

 .offcanvas-body .custome-dropdowm .dropdown-item {
    padding: var(--spacing-3) var(--spacing-3);
    font-size: var(--fz-size-14);
    font-weight: 400;
    color: var(--interactive-text-gray-normal);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.offcanvas-body .custome-dropdowm li .show-leading::after{
    width: 1rem;
    font-size: 16px;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\e8cd';
    font-family: "feather";
    position: absolute;
    right: 6%;
    color: var(--interactive-icon-gray-muted);
    vertical-align: middle;
 }

 .offcanvas-body .custome-dropdowm li a:hover, a:active{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}

.offcanvas-body .custome-dropdowm li .hover{
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
    border-radius: var(--bradius-medium);
}
.offcanvas-body .custome-dropdowm li a:focus, a:focus-visible{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-gray-default);
}

.offcanvas-body .custome-dropdowm li.active a{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-faded);
}
.offcanvas-body .custome-dropdowm li.active:hover a{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-normal);
    background-color: var(--interactive-background-primary-fadedHighlighted);
}

.offcanvas-body .custome-dropdowm li a.focus{
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-radius: var(--bradius-medium);

}
.offcanvas-body .custome-dropdowm li a.disabled{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-gray-disabled);
    background-color: var(--transperent);
}
.offcanvas-body .custome-dropdowm li a.destructive{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--transperent);
}
.offcanvas-body .custome-dropdowm li a.destructive:hover{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}
.offcanvas-body .custome-dropdowm li a.destructive-hover{
    border-radius: var(--bradius-medium);
    color: var(--interactive-text-negative-normal);
    background-color: var(--interactive-background-negative-faded);
}

.offcanvas-body .list-group .sidenav-menu-collapsed {
    color: var(--interactive-text-gray-normal);
    border-radius: var(--bradius-medium);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
    line-height: var(--lineheight-20);
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    margin-left: var(--size-08);
    vertical-align: middle;
}
.offcanvas-body .search-container {
    padding: var(--spacing-5);
    text-align: center;
}
.offcanvas-body .search-container div {
    margin-bottom: var(--spacing-5);
    }
.offcanvas-body .search-container div i{
    font-size: var(--fz-size-24);    
}
.offcanvas-body .search-container .title-container{
    line-height: var(--spacing-3);
}
.offcanvas-body .search-container .search-title{
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-2);
}
.offcanvas-body .search-container .search-subtitle{
    color: var(--surface-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--fw-400);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-3);
}

.offcanvas-body .search-link {
    color: var(--interactive-text-primary-normal);
    text-decoration: none;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-700);
    line-height: var(--Typography-Line-height-line-height-100, 20px);
    line-height: var(--spacing-3);
}
.offcanvas-body .search-link:hover {
    text-decoration: underline;
    background-color: transparent !important;
    cursor: pointer;
}

/* Indicator - Css */


.indicator{
    color: var(--surface-text-gray-subtle);
    font-weight: var(--fw-600);
    display: flex;
    align-items: center;
}
.indicator i{
    margin-right: var(--spacing-2);
}

.indicator-positive i {
    color: var(--feedback-icon-positive-intense);
}

.indicator-negative i {
    color: var(--feedback-icon-negative-intense);
}

.indicator-notice i {
    color: var(--feedback-icon-notice-intense);
}
.indicator-information i {
    color: var(--feedback-icon-information-intense);
}
.indicator-neutral i {
    color: var(--feedback-icon-neutral-intense);
}
.indicator-sm{
    font-size: var(--fz-size-12);
}
.indicator-sm i{
    font-size: var(--fz-size-12);    
}
.indicator-md{
    font-size: var(--fz-size-14);
}
.indicator-md i{
    font-size: var(--fz-size-14);    
}
.indicator-lg {
    font-size: var(--fz-size-14);
}
.indicator-lg i{
    font-size: var(--fz-size-18);
    
}




/* Global Show code button - Css */

.show-code {
    color: var(--interactive-text-primary-normal);
    background-color: var(--transperent);
    font-size: var(--fz-size-14);
    line-height: var(--lineheight-24);
    font-weight: var(--fw-600);
    border: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: var(--spacing-0) var(--spacing-4);
    text-decoration: none;
    border-radius: var(--bradius-medium);
}
.show-code::after {    
    margin-left: auto;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-text-primary-normal);
    margin-left: 4px;
    vertical-align: bottom;
}

.show-code.hide::after {
    flex-shrink: 0;
    margin-left: auto;
    content: "\e845" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-text-primary-normal);
    margin-left: 4px;
    vertical-align: bottom;    
}

.tab-panel {
    padding: var(--size-16) var(--size-100);
}

.disabled, button[disabled]{
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* Elevation - CSS */
.box{
    max-width: 150px;
    height: 150px;
    border-radius: var(--bradius-large);
    background: var(--surface-background-gray-intense);
}
 
.micro-raised{    
    box-shadow: 0px 2px 5px var(--elevation-microRaised);
}
.low-raised{
    box-shadow: 0px 2px 16px var(--elevation-lowraised);
}
.mid-raised{
    box-shadow: 0px 8px 24px var(--elevation-midraised);
}
.high-raised{
    box-shadow: 0px 16px 48px -4px var(--elevation-highraised);
}
 
/* Loading - CSS */
.loading {
    background:#F6F8FB;
    width: 100%;
    height: 100vh;
  }
 
.spinning-bar {
    position: fixed;
    z-index: 999999;
    top: 50%;
    left: 50%;
    height:120px;
    width: 80px;
    background: url(../svg/one-loading.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  
/* Back to Top CSS Start */
#auto-top-link { display:none; padding: 3px; position:fixed;  float:left; bottom:50px; right:25px; z-index:100; height:32px; width:32px; border-radius:var(--bradius-medium); transition:all .5s ease 0s; -ms-transition:all .5s ease 0s; -o-transition:all .5s ease 0s; -webkit-transition:all .5s ease 0s; cursor: pointer; }
#auto-top-link i{ font-size: var(--fz-size-24); padding:0px; }
#auto-top-link:hover { padding-top: 0px; }

.external-link { text-decoration: none; display: block;}


/* Stepper - Css */

.step{
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
    align-items: center;
    text-align: center;
}
.step-vertical{
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    align-items: center;
    text-align: left;
}

.bs-stepper .step-trigger {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #6c757d;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: none;
    border-radius: var(--bradius-max);
    padding: 2px;
    transition: background-color .15s ease-out, color .15s ease-out
}

.bs-stepper .step-trigger:not(:disabled):not(.disabled) {
    cursor: pointer
}

.bs-stepper .step-trigger.disabled,
.bs-stepper .step-trigger:disabled {
    pointer-events: none;
    opacity: .65
}

.bs-stepper .step-trigger:focus {
    color: #007bff;
    outline: 0
}

.bs-stepper .step-trigger:hover {
    text-decoration: none;
    background-color: var(--transperent);
}



.bs-stepper-label {
    display: inline-block;
    padding-left: var(--spacing-3);
    color: var(--surafec-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
}
.bs-stepper-label-bottom {
    display: block;
    padding-top: var(--spacing-3);
    color: var(--surafec-text-gray-normal);
    font-size: var(--fz-size-12);
    font-weight: var(--typography-typefaces-body);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
}

.label-sm {    
    font-size: var(--fz-size-12);
    font-weight: var(--fw-700);
    line-height: var(--lineheight-18);
}
.label-md {    
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
    line-height: var(--lineheight-18);
}
.label-lg {    
    font-size: var(--fz-size-18);
    font-weight: var(--fw-500);
    line-height: var(--lineheight-24);
}



.bs-stepper-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}



.bs-stepper .line,
.bs-stepper-line {
    -ms-flex: 1 0 32px;
    flex: 1 0 32px;
    min-width: 2px;
    min-height: 2px;
    margin: auto;
    background-color: var(--surface-border-gray-muted);
}
.bs-stepper .line,
.bs-stepper-line-bottom {
    -ms-flex: 1 0 32px;
    flex: 1 0 32px;
    min-width: 2px;
    min-height: 2px;
    margin-top: -30px;
    background-color: var(--surface-border-gray-muted);
}
.bs-stepper .line,
.bs-stepper-line-vertical {
    -ms-flex: 1 0 32px;
    flex: 1 0 32px;
    min-width: 2px;
    min-height: 2px;
    margin-left: 18px;
    width: 2px;
    background-color: var(--surface-border-gray-muted);
}

.bs-stepper .line,
.bs-stepper-line.active {
    background-color: var(--feedback-border-information-intense);
}
.bs-stepper .line,
.bs-stepper-line.positive {
    background-color: var(--feedback-border-positive-intense);
}
.bs-stepper .line,
.bs-stepper-line.negative {
    background-color: var(--feedback-border-negative-intense);
}
.bs-stepper .line,
.bs-stepper-line.notice {
    background-color: var(--feedback-border-notice-intense);
}



.bs-stepper-circle {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: var(--spacing-4) var(--spacing-4);    
    line-height: 1em;
    color: var(--interactive-text-gray-subtle);
    background-color: var(--surface-background-gray-intense);
    border-radius: var(--bradius-max);
    align-items: center;
    border: 1px solid var(--interactive-border-gray-faded);
    text-align: center;
    vertical-align: middle;
    flex-wrap: wrap;
}
.bs-stepper-circle i {
    font-size: var(--fz-size-20);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.bs-stepper-circle.stepper-sm {   
    width: 36px;
    height: 36px;
    padding: var(--spacing-4) var(--spacing-4); 
    border-radius: var(--bradius-max);
}
.bs-stepper-circle.stepper-sm p.sm-label {   
    font-size: var(--fz-size-14);
    font-weight: var(--fw-400);
}
.bs-stepper-circle.stepper-md {   
    width: 48px;
    height: 48px;
    padding: var(--spacing-4) var(--spacing-4);  
    border-radius: var(--bradius-max);
}
.bs-stepper-circle.stepper-md p.md-label {   
    font-size: var(--fz-size-16);
    font-weight: var(--fw-400);
}
.bs-stepper-circle.stepper-md i {   
    font-size: var(--fz-size-24);
}
.bs-stepper-circle.stepper-lg {   
    width: 68px;
    height: 68px;
    padding: var(--spacing-7) var(--spacing-6);    
    line-height: 1em;    
    border-radius: var(--bradius-max);
}
.bs-stepper-circle.stepper-lg p.lg-label {   
    font-size: var(--fz-size-24);
    font-weight: var(--fw-400);
}
.bs-stepper-circle.stepper-lg i{   
    font-size: var(--size-32);
}

.bs-stepper-circle.active {
    border: 2px solid var(--interactive-border-information-default);
    background: var(--interactive-background-information-faded);
}

.bs-stepper-circle.positive {
    border: 2px solid var(--interactive-border-positive-default);
    background: var(--interactive-background-positive-default);
    color: var(--interactive-text-staticwhite-normal) !important;
}

.bs-stepper-circle.negative {
    border: 2px solid var(--interactive-border-negative-default);
    background: var(--interactive-background-negative-default);
    color: var(--interactive-text-staticwhite-normal) !important;
}
.bs-stepper-circle.notice {
    border: 2px solid var(--interactive-border-notice-default);
    background: var(--interactive-background-notice-default);
    color: var(--interactive-text-staticwhite-normal) !important;
}



.bs-stepper-content {
    padding: 0 20px 20px
}



.bs-stepper.vertical {
    display: -ms-flexbox;
    display: flex
}

.bs-stepper.vertical .bs-stepper-header {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0
}

.bs-stepper.vertical .bs-stepper-pane,
.bs-stepper.vertical .content {
    display: block
}

.bs-stepper.vertical .bs-stepper-pane:not(.fade),
.bs-stepper.vertical .content:not(.fade) {
    display: block;
    visibility: hidden
}

.bs-stepper .content:not(.fade),
.bs-stepper-pane:not(.fade) {
    display: none
}



.bs-stepper .content.fade,
.bs-stepper-pane.fade {
    visibility: hidden;
    transition-duration: .3s;
    transition-property: opacity
}

.bs-stepper .content.fade.active,
.bs-stepper-pane.fade.active {
    visibility: visible;
    opacity: 1
}

.bs-stepper .content.active:not(.fade),
.bs-stepper-pane.active:not(.fade) {
    display: block;
    visibility: visible
}

.bs-stepper .content.dstepper-block,
.bs-stepper-pane.dstepper-block {
    display: block
}

.bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none,
.bs-stepper:not(.vertical) .content.dstepper-none {
    display: none
}

.vertical .bs-stepper-pane.fade.dstepper-none,
.vertical .content.fade.dstepper-none {
    visibility: hidden
}

/* Scroll bar - Css */

.custome-overflow-y{
    overflow-y: scroll;
    height: 30vh;
}
.custome-overflow-x{
    overflow-x: scroll;
    width: 70%;
}


/* colors - CSS */

.list-text{
    color: var(--surface-text-staticblack-subtle);

}

.hide_mobile{
    font-style: italic;
    color: var(--surface-icon-staticblack-muted);
    font-weight: var(--fw-400);
}

.dark {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.dark .option-1{
    background-color: var(--surface-background-dark-subtle);
    height: 70px;
    
}
.dark .option-2{
    background-color: var(--surface-background-dark-moderate);
    height:50px;
    width: 50%;
}
.dark .option-3{
    background-color: var(--surface-background-dark-intense);
    height:50px;
    width: 50%;
}

.gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.gray .option-1{
    background-color: var(--surface-background-gray-subtle);
    height: 70px;
}
.gray .option-2{
    background-color: var(--surface-background-gray-moderate);
     height:50px;
    width: 50%;
}
.gray .option-3{
    background-color: var(--surface-background-gray-intense);
     height:50px;
    width: 50%;
}
.primary {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.primary .option-1{
    background-color: var(--surface-background-primary-subtle);
    height: 80px;
}
.primary .option-3{
    background-color: var(--surface-background-primary-intense);
    height: 40px;
}


.text-gray {
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-gray .option-1{
    background-color: var(--surface-icon-gray-normal);
    height: 80px;
    width: 50%;
}
.text-gray .option-2{
    background-color: var(--surface-icon-gray-subtle);
    height: 80px;
    width: 50%;
}
.text-gray .option-3{
    background-color: var(--surface-icon-gray-muted);
    height: 50px;
    width: 50%;
}
.text-gray .option-4{
    background-color: var(--surface-icon-gray-disabled);
    height: 50px;
    width: 50%;
}

.texticon-primary{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.texticon-primary .option-1{
    background-color: var(--surface-icon-primary-normal);
    height: 130px;
    width: 100%;
}

.staticwhite{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.staticwhite-bg{
    background: black;
}
.staticwhite .option-1{
    background-color: var(--surface-icon-staticwhite-normal);
    height: 80px;
    width: 50%;
    box-shadow: 0px 2px 16px var(--elevation-lowraised);
    
}
.staticwhite .option-2{
    background-color: var(--surface-icon-staticwhite-subtle);
    height: 80px;
    width: 50%;
    
}
.staticwhite .option-3{
    background-color: var(--surface-icon-staticwhite-muted);
    height: 50px;
    width: 50%;
   
}
.staticwhite .option-4{
    background-color: var(--surface-icon-staticwhite-disabled);
    height: 50px;
    width: 50%;
   
}


.staticblack{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.staticblack-bg{
    background: white;
}
.staticblack .option-1{
    background-color: var(--surface-icon-staticblack-normal);
    height: 80px;
    width: 50%;
    
}
.staticblack .option-2{
    background-color: var(--surface-icon-staticblack-subtle);
    height: 80px;
    width: 50%;
    
}
.staticblack .option-3{
    background-color: var(--surface-icon-staticblack-muted);
    height: 50px;
    width: 50%;
   
}
.staticblack .option-4{
    background-color: var(--surface-icon-staticblack-disabled);
    height: 50px;
    width: 50%;
   
}



.border-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-gray .option-1{
    background-color: var(--surface-border-gray-normal);
    height: 80px;
}
.border-gray .option-3{
    background-color: var(--surface-border-gray-muted);
    height: 40px;
}


.border-primary{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-primary .option-1{
    background-color: var(--surface-border-primary-normal);
    height: 120px;
}


.bg-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.bg-positive .option-1{
    background-color: var(--feedback-background-positive-subtle);
    height: 80px;
}
.bg-positive .option-3{
    background-color: var(--feedback-background-positive-intense);
    height: 40px;
}


.bg-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.bg-negative .option-1{
    background-color: var(--feedback-background-negative-subtle);
    height: 80px;
}
.bg-negative .option-3{
    background-color: var(--feedback-background-negative-intense);
    height: 40px;
}

.bg-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.bg-notice .option-1{
    background-color: var(--feedback-background-notice-subtle);
    height: 80px;
}
.bg-notice .option-3{
    background-color: var(--feedback-background-notice-intense);
    height: 40px;
}

.bg-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.bg-information .option-1{
    background-color: var(--feedback-background-information-subtle);
    height: 80px;
}
.bg-information .option-3{
    background-color: var(--feedback-background-information-intense);
    height: 40px;
}

.bg-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.bg-neutral .option-1{
    background-color: var(--feedback-background-neutral-subtle);
    height: 80px;
}
.bg-neutral .option-3{
    background-color: var(--feedback-background-neutral-intense);
    height: 40px;
}

.text-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-positive .option-1{
    background-color: var(--feedback-text-positive-subtle);
    height: 80px;
}
.text-positive .option-3{
    background-color: var(--feedback-text-positive-intense);
    height: 40px;
}


.text-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-negative .option-1{
    background-color: var(--feedback-text-negative-subtle);
    height: 80px;
}
.text-negative .option-3{
    background-color: var(--feedback-text-negative-intense);
    height: 40px;
}

.text-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-notice .option-1{
    background-color: var(--feedback-text-notice-subtle);
    height: 80px;
}
.text-notice .option-3{
    background-color: var(--feedback-text-notice-intense);
    height: 40px;
}

.text-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-information .option-1{
    background-color: var(--feedback-text-information-subtle);
    height: 80px;
}
.text-information .option-3{
    background-color: var(--feedback-text-information-intense);
    height: 40px;
}

.text-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.text-neutral .option-1{
    background-color: var(--feedback-text-neutral-subtle);
    height: 80px;
}
.text-neutral .option-3{
    background-color: var(--feedback-text-neutral-intense);
    height: 40px;
}

.border-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-positive .option-1{
    background-color: var(--feedback-border-positive-subtle);
    height: 80px;
}
.border-positive .option-3{
    background-color: var(--feedback-border-positive-intense);
    height: 40px;
}


.border-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-negative .option-1{
    background-color: var(--feedback-border-negative-subtle);
    height: 80px;
}
.border-negative .option-3{
    background-color: var(--feedback-border-negative-intense);
    height: 40px;
}

.border-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-notice .option-1{
    background-color: var(--feedback-border-notice-subtle);
    height: 80px;
}
.border-notice .option-3{
    background-color: var(--feedback-border-notice-intense);
    height: 40px;
}

.border-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-information .option-1{
    background-color: var(--feedback-border-information-subtle);
    height: 80px;
}
.border-information .option-3{
    background-color: var(--feedback-border-information-intense);
    height: 40px;
}

.border-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.border-neutral .option-1{
    background-color: var(--feedback-border-neutral-subtle);
    height: 80px;
}
.border-neutral .option-3{
    background-color: var(--feedback-border-neutral-intense);
    height: 40px;
}


.inter-bg-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-positive .option-1{
    background-color: var(--interactive-background-positive-default);
    height: 80px;
    width: 50%;
}
.inter-bg-positive .option-2{
    background-color: var(--interactive-background-positive-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-positive .option-3{
    background-color: var(--interactive-background-positive-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-positive .option-4{
    background-color: var(--interactive-background-positive-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-positive .option-5{
    background-color: var(--interactive-background-positive-fadedHighlighted);
    height: 50px;
    width: 50%;
}


.inter-bg-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-negative .option-1{
    background-color: var(--interactive-background-negative-default);
    height: 80px;
    width: 50%;
}
.inter-bg-negative .option-2{
    background-color: var(--interactive-background-negative-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-negative .option-3{
    background-color: var(--interactive-background-negative-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-negative .option-4{
    background-color: var(--interactive-background-negative-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-negative .option-5{
    background-color: var(--interactive-background-negative-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-notice .option-1{
    background-color: var(--interactive-background-notice-default);
    height: 80px;
    width: 50%;
}
.inter-bg-notice .option-2{
    background-color: var(--interactive-background-notice-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-notice .option-3{
    background-color: var(--interactive-background-notice-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-notice .option-4{
    background-color: var(--interactive-background-notice-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-notice .option-5{
    background-color: var(--interactive-background-notice-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-information .option-1{
    background-color: var(--interactive-background-information-default);
    height: 80px;
    width: 50%;
}
.inter-bg-information .option-2{
    background-color: var(--interactive-background-information-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-information .option-3{
    background-color: var(--interactive-background-information-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-information .option-4{
    background-color: var(--interactive-background-information-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-information .option-5{
    background-color: var(--interactive-background-information-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-neutral .option-1{
    background-color: var(--interactive-background-neutral-default);
    height: 80px;
    width: 50%;
}
.inter-bg-neutral .option-2{
    background-color: var(--interactive-background-neutral-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-neutral .option-3{
    background-color: var(--interactive-background-neutral-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-neutral .option-4{
    background-color: var(--interactive-background-neutral-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-neutral .option-5{
    background-color: var(--interactive-background-neutral-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-primary{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-primary .option-1{
    background-color: var(--interactive-background-primary-default);
    height: 80px;
    width: 50%;
}
.inter-bg-primary .option-2{
    background-color: var(--interactive-background-primary-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-primary .option-3{
    background-color: var(--interactive-background-primary-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-primary .option-4{
    background-color: var(--interactive-background-primary-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-primary .option-5{
    background-color: var(--interactive-background-primary-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-bg-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-gray .option-1{
    background-color: var(--interactive-background-gray-default);
    height: 80px;
    width: 50%;
}
.inter-bg-gray .option-2{
    background-color: var(--interactive-background-gray-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-gray .option-3{
    background-color: var(--interactive-background-gray-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-gray .option-4{
    background-color: var(--interactive-background-gray-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-gray .option-5{
    background-color: var(--interactive-background-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-gray .option-1{
    background-color: var(--interactive-background-gray-default);
    height: 80px;
    width: 50%;
}
.inter-bg-gray .option-2{
    background-color: var(--interactive-background-gray-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-gray .option-3{
    background-color: var(--interactive-background-gray-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-gray .option-4{
    background-color: var(--interactive-background-gray-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-gray .option-5{
    background-color: var(--interactive-background-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-bg-staticwhite{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-staticwhite .option-1{
    background-color: var(--interactive-background-staticwhite-default);
    height: 80px;
    width: 50%;
    box-shadow: 0px 2px 16px var(--elevation-lowraised);
}
.inter-bg-staticwhite .option-2{
    background-color: var(--interactive-background-staticwhite-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-staticwhite .option-3{
    background-color: var(--interactive-background-staticwhite-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-staticwhite .option-4{
    background-color: var(--interactive-background-staticwhite-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-staticwhite .option-5{
    background-color: var(--interactive-background-staticwhite-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-bg-staticblack{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-bg-staticblack .option-1{
    background-color: var(--interactive-background-staticblack-default);
    height: 80px;
    width: 50%;
}
.inter-bg-staticblack .option-2{
    background-color: var(--interactive-background-staticblack-highlighted);
    height: 80px;
    width: 50%;
}
.inter-bg-staticblack .option-3{
    background-color: var(--interactive-background-staticblack-disabled);
    height: 50px;
    width: 50%;
}
.inter-bg-staticblack .option-4{
    background-color: var(--interactive-background-staticblack-faded);
    height: 50px;
    width: 50%;
}
.inter-bg-staticblack .option-5{
    background-color: var(--interactive-background-staticblack-fadedHighlighted);
    height: 50px;
    width: 50%;
}





.inter-text-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-positive .option-1{
    background-color: var(--interactive-text-positive-normal);
    height: 80px;
    width: 50%;
}
.inter-text-positive .option-2{
    background-color: var(--interactive-text-positive-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-positive .option-3{
    background-color: var(--interactive-text-positive-muted);
    height: 50px;
    width: 50%;
}
.inter-text-positive .option-4{
    background-color: var(--interactive-text-positive-disabled);
    height: 50px;
    width: 50%;
}


.inter-text-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-negative .option-1{
    background-color: var(--interactive-text-negative-normal);
    height: 80px;
    width: 50%;
}
.inter-text-negative .option-2{
    background-color: var(--interactive-text-negative-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-negative .option-3{
    background-color: var(--interactive-text-negative-muted);
    height: 50px;
    width: 50%;
}
.inter-text-negative .option-4{
    background-color: var(--interactive-text-negative-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-notice .option-1{
    background-color: var(--interactive-text-notice-normal);
    height: 80px;
    width: 50%;
}
.inter-text-notice .option-2{
    background-color: var(--interactive-text-notice-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-notice .option-3{
    background-color: var(--interactive-text-notice-muted);
    height: 50px;
    width: 50%;
}
.inter-text-notice .option-4{
    background-color: var(--interactive-text-notice-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-information .option-1{
    background-color: var(--interactive-text-information-normal);
    height: 80px;
    width: 50%;
}
.inter-text-information .option-2{
    background-color: var(--interactive-text-information-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-information .option-3{
    background-color: var(--interactive-text-information-muted);
    height: 50px;
    width: 50%;
}
.inter-text-information .option-4{
    background-color: var(--interactive-text-information-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-neutral .option-1{
    background-color: var(--interactive-text-neutral-normal);
    height: 80px;
    width: 50%;
}
.inter-text-neutral .option-2{
    background-color: var(--interactive-text-neutral-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-neutral .option-3{
    background-color: var(--interactive-text-neutral-muted);
    height: 50px;
    width: 50%;
}
.inter-text-neutral .option-4{
    background-color: var(--interactive-text-neutral-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-primary{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-primary .option-1{
    background-color: var(--interactive-text-primary-normal);
    height: 80px;
    width: 50%;
}
.inter-text-primary .option-2{
    background-color: var(--interactive-text-primary-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-primary .option-3{
    background-color: var(--interactive-text-primary-muted);
    height: 50px;
    width: 50%;
}
.inter-text-primary .option-4{
    background-color: var(--interactive-text-primary-disabled);
    height: 50px;
    width: 50%;
}



.inter-text-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-gray .option-1{
    background-color: var(--interactive-text-gray-normal);
    height: 80px;
    width: 50%;
}
.inter-text-gray .option-2{
    background-color: var(--interactive-text-gray-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-gray .option-3{
    background-color: var(--interactive-text-gray-muted);
    height: 50px;
    width: 50%;
}
.inter-text-gray .option-4{
    background-color: var(--interactive-text-gray-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-gray .option-1{
    background-color: var(--interactive-text-gray-normal);
    height: 80px;
    width: 50%;
}
.inter-text-gray .option-2{
    background-color: var(--interactive-text-gray-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-gray .option-3{
    background-color: var(--interactive-text-gray-muted);
    height: 50px;
    width: 50%;
}
.inter-text-gray .option-4{
    background-color: var(--interactive-text-gray-disabled);
    height: 50px;
    width: 50%;
}



.inter-text-staticwhite{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-staticwhite .option-1{
    background-color: var(--interactive-text-staticwhite-normal);
    height: 80px;
    width: 50%;
    box-shadow: 0px 2px 16px var(--elevation-lowraised);
}
.inter-text-staticwhite .option-2{
    background-color: var(--interactive-text-staticwhite-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-staticwhite .option-3{
    background-color: var(--interactive-text-staticwhite-muted);
    height: 50px;
    width: 50%;
}
.inter-text-staticwhite .option-4{
    background-color: var(--interactive-text-staticwhite-disabled);
    height: 50px;
    width: 50%;
}

.inter-text-staticblack{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-text-staticblack .option-1{
    background-color: var(--interactive-text-staticblack-normal);
    height: 80px;
    width: 50%;
}
.inter-text-staticblack .option-2{
    background-color: var(--interactive-text-staticblack-subtle);
    height: 80px;
    width: 50%;
}
.inter-text-staticblack .option-3{
    background-color: var(--interactive-text-staticblack-muted);
    height: 50px;
    width: 50%;
}
.inter-text-staticblack .option-4{
    background-color: var(--interactive-text-staticblack-disabled);
    height: 50px;
    width: 50%;
}


.inter-border-positive{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-positive .option-1{
    background-color: var(--interactive-border-positive-default);
    height: 80px;
    width: 50%;
}
.inter-border-positive .option-2{
    background-color: var(--interactive-border-positive-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-positive .option-3{
    background-color: var(--interactive-border-positive-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-positive .option-4{
    background-color: var(--interactive-border-positive-faded);
    height: 50px;
    width: 50%;
}
.inter-border-positive .option-5{
    background-color: var(--interactive-border-positive-fadedHighlighted);
    height: 50px;
    width: 50%;
}


.inter-border-negative{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-negative .option-1{
    background-color: var(--interactive-border-negative-default);
    height: 80px;
    width: 50%;
}
.inter-border-negative .option-2{
    background-color: var(--interactive-border-negative-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-negative .option-3{
    background-color: var(--interactive-border-negative-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-negative .option-4{
    background-color: var(--interactive-border-negative-faded);
    height: 50px;
    width: 50%;
}
.inter-border-negative .option-5{
    background-color: var(--interactive-border-negative-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-notice{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-notice .option-1{
    background-color: var(--interactive-border-notice-default);
    height: 80px;
    width: 50%;
}
.inter-border-notice .option-2{
    background-color: var(--interactive-border-notice-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-notice .option-3{
    background-color: var(--interactive-border-notice-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-notice .option-4{
    background-color: var(--interactive-border-notice-faded);
    height: 50px;
    width: 50%;
}
.inter-border-notice .option-5{
    background-color: var(--interactive-border-notice-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-information{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-information .option-1{
    background-color: var(--interactive-border-information-default);
    height: 80px;
    width: 50%;
}
.inter-border-information .option-2{
    background-color: var(--interactive-border-information-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-information .option-3{
    background-color: var(--interactive-border-information-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-information .option-4{
    background-color: var(--interactive-border-information-faded);
    height: 50px;
    width: 50%;
}
.inter-border-information .option-5{
    background-color: var(--interactive-border-information-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-neutral{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-neutral .option-1{
    background-color: var(--interactive-border-neutral-default);
    height: 80px;
    width: 50%;
}
.inter-border-neutral .option-2{
    background-color: var(--interactive-border-neutral-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-neutral .option-3{
    background-color: var(--interactive-border-neutral-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-neutral .option-4{
    background-color: var(--interactive-border-neutral-faded);
    height: 50px;
    width: 50%;
}
.inter-border-neutral .option-5{
    background-color: var(--interactive-border-neutral-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-primary{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-primary .option-1{
    background-color: var(--interactive-border-primary-default);
    height: 80px;
    width: 50%;
}
.inter-border-primary .option-2{
    background-color: var(--interactive-border-primary-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-primary .option-3{
    background-color: var(--interactive-border-primary-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-primary .option-4{
    background-color: var(--interactive-border-primary-faded);
    height: 50px;
    width: 50%;
}
.inter-border-primary .option-5{
    background-color: var(--interactive-border-primary-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-border-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-gray .option-1{
    background-color: var(--interactive-border-gray-default);
    height: 80px;
    width: 50%;
}
.inter-border-gray .option-2{
    background-color: var(--interactive-border-gray-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-gray .option-3{
    background-color: var(--interactive-border-gray-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-gray .option-4{
    background-color: var(--interactive-border-gray-faded);
    height: 50px;
    width: 50%;
}
.inter-border-gray .option-5{
    background-color: var(--interactive-border-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-gray{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-gray .option-1{
    background-color: var(--interactive-border-gray-default);
    height: 80px;
    width: 50%;
}
.inter-border-gray .option-2{
    background-color: var(--interactive-border-gray-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-gray .option-3{
    background-color: var(--interactive-border-gray-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-gray .option-4{
    background-color: var(--interactive-border-gray-faded);
    height: 50px;
    width: 50%;
}
.inter-border-gray .option-5{
    background-color: var(--interactive-border-gray-fadedHighlighted);
    height: 50px;
    width: 50%;
}



.inter-border-staticwhite{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-staticwhite .option-1{
    background-color: var(--interactive-border-staticwhite-default);
    height: 80px;
    width: 50%;
    box-shadow: 0px 2px 16px var(--elevation-lowraised);
}
.inter-border-staticwhite .option-2{
    background-color: var(--interactive-border-staticwhite-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-staticwhite .option-3{
    background-color: var(--interactive-border-staticwhite-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-staticwhite .option-4{
    background-color: var(--interactive-border-staticwhite-faded);
    height: 50px;
    width: 50%;
}
.inter-border-staticwhite .option-5{
    background-color: var(--interactive-border-staticwhite-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.inter-border-staticblack{
    width: 20%;
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
}
.inter-border-staticblack .option-1{
    background-color: var(--interactive-border-staticblack-default);
    height: 80px;
    width: 50%;
}
.inter-border-staticblack .option-2{
    background-color: var(--interactive-border-staticblack-highlighted);
    height: 80px;
    width: 50%;
}
.inter-border-staticblack .option-3{
    background-color: var(--interactive-border-staticblack-disabled);
    height: 50px;
    width: 50%;
}
.inter-border-staticblack .option-4{
    background-color: var(--interactive-border-staticblack-faded);
    height: 50px;
    width: 50%;
}
.inter-border-staticblack .option-5{
    background-color: var(--interactive-border-staticblack-fadedHighlighted);
    height: 50px;
    width: 50%;
}

.content-view{
    display: flex;
}


/*Datepicker css start*/

  .datepicker tr th {
    background-color: transparent !important;
    padding: 12px 6px;
    color: var(--surface-text-gray-normal);
  }

  .datepicker tr td {
    padding: 8px !important;
    height: 12px !important;
    width: 12px !important;
    line-height: normal !important;
    color: var(--surface-text-gray-subtle);
  }

  .bootstrap-datetimepicker-widget table td.active,
  .bootstrap-datetimepicker-widget table td.active:hover,
  .bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--surface-background-primary-intense) !important;
  }

  .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--surface-background-primary-intense) !important;
  }

  .bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: var(--popup-border-intense) !important;
  }

  .picker-switch .table-condensed td {
    padding: 10px;
  }

  .picker-switch .table-condensed td a {
    color: var(--surface-background-primary-intense) !important;
  }

  .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
    color: var(--surface-background-primary-intense) !important;
  }

  .timepicker .btn {
    background-color: transparent !important;
    border: none !important;
  }

  .timepicker .btn.btn-primary {
    background-color: var(--interactive-background-primary-default) !important;
  }

.input-group-append .input-group-text {border-radius: 0 4px 4px 0px !important;  }
.date_css input::placeholder{  color: var(--surface-text-gray-subtle);}
.input_small .date_css input{ height: var(--size-32);}
.input_medium .date_css input{ height: var(--size-36);}
.input_large .date_css input{ height: var(--size-48);}

.input_small .date_css .input-group-append .input-group-text { padding:10px; height: var(--size-32);}
.input_medium .date_css .input-group-append .input-group-text { padding:11px; height: var(--size-36);}
.input_large .date_css .input-group-append .input-group-text { padding:14px; height: var(--size-48);}
.date_css input:focus {outline: 2px solid var(--surface-background-primary-intense) !important; border: 0px !important;}
.date_css i { color: var(--surface-icon-gray-subtle);}
.input_small .date_css i, .input_medium .date_css i { font-size: var(--fz-size-20);}
.input_large .date_css i { font-size: var(--fz-size-24);}
.bootstrap-datetimepicker-widget table {color: var(--surface-text-gray-subtle);}
.fa.fa-calendar, .fa.fa-calendar-check-o { font-size: 22px;}

 .select-input{
    position: relative;
    display: flex;
    align-items: center;
 }

.form-select{
    border: 1px solid;
    border-color: var(--interactive-border-gray-default);
    border-radius: var(--bradius-medium);
    padding-left: var(--input-textfield-large-horizontal-padding);
    padding-right: var(--input-textfield-large-horizontal-padding);
    background-color: var(--surface-background-gray-moderate);
}
.form-select:focus-within {
    outline: 2px solid var(--surface-background-primary-intense) !important;
}
.form-select:focus {
    outline: 2px solid var(--surface-background-primary-intense) !important;
    border-color: var(--surface-background-primary-intense);
    outline: 0;
    box-shadow: none;
}

.form-select:hover {
    background-color: var(--interactive-background-gray-faded);
}


.input_small .form-select {
    height: var(--size-32);
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle);
}
.form-select option {
    background-color: var(--popup-background-subtle);
    color: var(--surface-text-gray-normal);
}


.input_medium .form-select {
    height: var(--size-36);
    font-size: var(--fz-size-14);
    color: var(--surface-text-gray-subtle);
}

.input_large .form-select {
    height: var(--size-48);
    font-size: var(--fz-size-16);
    color: var(--surface-text-gray-subtle);
}

.form-select.hover{
    background-color: var(--surface-background-gray-moderate);
}
.form-select.active{
    outline: 2px solid var(--surface-background-primary-intense) !important;
}



.form-select {
    --bs-form-select-bg-img: none; 
    position: relative; 
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    cursor: pointer; 
     color: var(--surface-text-gray-subtle);
     opacity: 1 !important;
}
.select-input::after {
    flex-shrink: 0;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--interactive-icon-gray-muted);
    position: absolute;
    right: 2%;
    pointer-events: none;
}

.select-input.disabled .form-select{
    cursor: no-drop;
    border-color: var(--interactive-border-gray-disabled);
    color: var(--surface-text-gray-disabled);
    background-color: transparent;
}
.select-input.disabled::after {
    flex-shrink: 0;
    content: "\e842" !important;
    font-size: var(--fz-size-16);
    font-family: 'feather' !important;
    background-image: none !important;
    color: var(--surface-icon-gray-disabled);
    position: absolute;
    right: 2%;
    cursor: no-drop;
}

.select-input.success .form-select{
    border-width: var(--bwidth-thicker);
    border-color: var(--interactive-border-primary-default);

}

.select-input.error .form-select{
    border-width: var(--bwidth-thicker);
    border-color: var(--interactive-border-negative-default);

}

.multi-select select {
      display: none;
}

.inputtext .dropdown-menu.show {
      display: block; 
      position: static !important;
}
.multi-select .form-check {
    display: flex;
    align-items: center;
}

.tag i{
    cursor: pointer;
}

.inputtext .dropdown-item {
      cursor: pointer;
    }

.inputtext .dropdown-item:hover {
      background-color: var(--surface-background-gray-subtle);
    }

.h-500{min-height:500px;}

/* Help Page Css */ 
.accordion .card {  
    border-radius: var(--bradius-medium) !important;
    padding: var(--spacing-5) var(--spacing-5);
}
.accordion .card .accordion-header .accordion-button{    
    padding: var(--spacing-0) var(--spacing-0);
    font-size: var(--fz-size-14);
    font-weight: var(--fw-600);
    line-height: var(--line-height-100);
    color: var(--surface-text-gray-normal);
    text-align: left;
    background-color: transparent;
    border: var(--bradius-none) !important;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
.accordion .card .accordion-header .accordion-button:not(.collapsed) {      
    padding-bottom: var(--spacing-4);
}
 
.accordion .card .accordion-body{
    padding: var(--spacing-5) var(--spacing-2) !important;
}

.filter-logo img{filter: var(--footer-logo-filter);}

.card { color: var(--surface-text-gray-normal);}

.header .dropdown-toggle:after{  content: "\e842" !important; font-size: var(--fz-size-14); font-family: 'feather' !important; background-image: none !important; color: var(--interactive-icon-staticwhite-normal); margin-left: -1px; vertical-align: bottom; border-top: none;}
.text-white{  color: var(--surface-text-staticwhite-subtle) !important;}
.library-dropdown{ left: 55px !important;}
.list-group-item{ background-color: transparent !important;}
.theme-drop{ display: none !important;}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--interactive-background-gray-disabled);
}

::-webkit-scrollbar-thumb {
  background-color: var(--interactive-icon-gray-disabled);
  border-radius: 6px;
  border: 3px solid var(--interactive-background-gray-disabled);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Dark mode scrollbar styles */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: var(--interactive-background-gray-disabled);
  }

  ::-webkit-scrollbar-thumb {
    border-radius: var(--bradius-max);
    background-color: var(--interactive-icon-gray-disabled);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--interactive-icon-gray-muted);
  }
}